当前位置：极客笔记 > JavaScript > JavaScript 精选教程 > Javascript 将数据插入indexedDB

Javascript 将数据插入indexedDB

Javascript 将数据插入indexedDB

我们可以使用javascript indexedDB函数向数据库中添加单个或多个数据。indexedDB数据库使用唯一的列id来插入数据，自增列id根据数据递增。根据用户需求，其他列插入值。在插入和保存数据时，唯一id、自增id和其他列id是必需的。

将数据插入javascript indexedDB的步骤

一旦成功打开与数据库的连接，我们可以在onsuccess事件处理程序中操作信息。

例如，要向数据库对象存储插入对象，可以按照以下步骤进行：

  • 首先，打开一个新事务。
  • 其次，获取一个对象存储。
  • 第三，调用对象存储的put()方法来插入新信息。
  • 最后，在操作完成后关闭indexedDB数据库的事务连接。

语法

以下insertData()函数将一个新名称保存到Names对象存储中：

function insertData(db_variable, name) {
    // create a new connection  or new transaction
    const txn_variable = db_variable.transaction('Name', 'readwrite');
    // Save Names object using variable
    const save_data = txn_variable.objectStore('Names');
    let query = save_data.put(contact);
    // handle success call of the indexedDB case
    query.onsuccess = function (event) {
        console.log(event);
    };
    // handle the error of the indexedDB case
    query.onerror = function (event) {
        console.log(event.target.errorCode);
    }
    // close the transaction of the indexedDB database 
    txn_variable.oncomplete = function () {
        db_variable.close();
    };
}

说明

  • 您必须使用IDBDatabase对象的transaction()函数开启一个新事务。
  • 一个事务可以以读写或只读模式打开。
  • 在只读模式下，您只能从数据库读取数据，读写模式可以访问数据库中的数据并写入数据库。
  • 如果您只想从数据库读取信息，最好开启一个只读事务。

创建insertName()函数后，您可以使用以下语法在请求中使用它存储一个或多个联系人的onsuccess事件处理程序：

在浏览器中查看index.html文件后，将执行脚本标签中的代码，以执行以下操作：

  • 在IndexedDB中创建CRM数据库。
  • 在CRM数据库中设置Names对象存储。
  • 向对象存储添加两条记录。

示例

下面的示例演示了如何保存单个和多个值。这里我们使用put()方法来

插入数据。

示例1

该示例显示浏览器支持IndexedDB，并使用一个名为javascript的事件。该函数使用插入事件来存储单个数据。

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title> JavaScript IndexedDb Demo </title>
   </head>
   <body>
      <h2> JavaScript IndexedDb Demo </h2>
      <p id = "demos"> </p>
      <p id = "demo2"> </p>
   </body>
   <script>
   const request = indexedDB.open('DB_name', 1);
    // create the Names object store and indexes
 request.onupgradeneeded = (event) => {
     let db_variable = event.target.result;
     // create the Names object store 
     // with auto-increment id
     let store_variable = db_variable.createObjectStore('Names', {
         autoIncrement: true
     });
     // create an index on the email property,
     let index_data = store_variable.createIndex('email', 'email', {
         unique: true
     });
 };
        function insertName(db_variable, name) {
    // create a new transaction
    const text_data = db_variable.transaction('Names', 'readwrite');
    // get the Names object store_variable
    const store_variable = text_data.objectStore('Names');
    let db_que = store_variable.put(name);
    // operate the success case of the database
    db_que.onsuccess = function (event) {
        console.log(event);
    };
    // operate the error of the database
    db_que.onerror = function (event) {
        console.log(event.target.errorCode);
    }
     // close the indexedDB database once the transaction completes
    text_data.oncomplete = function () {
        db_variable.close();
    };
}
request.onsuccess = (event) => {
     const db_variable = event.target.result;
     insertName(db_variable, {
         email: 'gacka@outlook.com',
     });
     insertName(db_variable, {
         email: 'sejal@gmail.com',
         });
};
 </script>
</html>

输出

输出图像显示了哪个事件调用了IndexedDB到浏览器。

Javascript 将数据插入indexedDB

示例2

该示例展示了浏览器使用名为javascript的事件来支持IndexedDb。该函数使用插入事件来存储多列数据。

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title> JavaScript IndexedDb Demo </title>
   </head>
   <body>
      <h2> JavaScript IndexedDb Demo </h2>
   </body>
   <script>
   const request = indexedDB.open('DB_name', 1);
    // create the Names object store and indexes
 request.onupgradeneeded = (event) => {
     let db_variable = event.target.result;
     // create the Names object store 
     // with auto-increment id
     let store_variable = db_variable.createObjectStore('Names', {
         autoIncrement: true
     });
     // create an index on the email property.
     let index_data = store_variable.createIndex('email', 'email', {
         unique: true
     });
 };
        function insertNames(db_variable, name) {
    // create a new transaction of the database
    const text_data = db_variable.transaction('Names', 'readwrite');
    // get the Names object store_variable
    const store_variable = text_data.objectStore('Names');
    let db_que = store_variable.put(name);
    //  operate the success case of the transaction
    db_que.onsuccess = function (event) {
        console.log(event);
    };
    // operate the error of the transaction  
    db_que.onerror = function (event) {
        console.log(event.target.errorCode);
    }
    // close the transaction of the database once operation completed 
       text_data.oncomplete = function () {
        db_variable.close();
    };
}
request.onsuccess = (event) => {
     const db_variable = event.target.result;
       insertNames(db_variable, {
         email: 'gacka@outlook.com',
        Names: 'Gauri sharma',
        Rank: 'fifth',
     });
     insertNames(db_variable, {
         email: 'samntha@gmail.com',
        Names: 'Samantha seth',
        Rank: 'fourth',
         });
};
 </script>
</html>

输出

输出图像显示了哪个事件调用了IndexedDB到浏览器。

Javascript 将数据插入indexedDB

示例3

该示例插入了两个Name和Rank列，但没有插入email列。该函数使用插入事件来存储多个列的数据。

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title> JavaScript IndexedDb Demo </title>
   </head>
   <body>
      <h2> JavaScript IndexedDb Demo </h2>
   </body>
   <script>
   const request = indexedDB.open('DB_name', 1);
    // create the Names object store and indexes
 request.onupgradeneeded = (event) => {
     let db_variable = event.target.result;
     // create the Names object store 
     // with auto-increment id
     let store_variable = db_variable.createObjectStore('Names', {
         autoIncrement: true
     });
     // create an index on the email property.
     let index_data = store_variable.createIndex('email', 'email', {
         unique: true
     });
 };
        function insertName(db_variable, name) {
    // create a new transaction of the database
    const text_data = db_variable.transaction('Names', 'readwrite');
    // get the Names object store_variable
    const store_variable = text_data.objectStore('Names');
    let db_que = store_variable.put(name);
    //  operate the success case of the transaction
    db_que.onsuccess = function (event) {
        console.log(event);
    };
    // operate the error of the transaction  
    db_que.onerror = function (event) {
        console.log(event.target.errorCode);
    }
    // close the transaction of the database once operation completed 
       text_data.oncomplete = function () {
        db_variable.close();
    };
}
request.onsuccess = (event) => {
     const db_variable = event.target.result;
       insertName(db_variable, {
        Names: 'gauri',
        Rank: '3',
     });
     insertName(db_variable, {
        Names: 'Rani',
        Rank: '2',
         });
    insertName(db_variable, {
        Names: 'Radha',
        Rank: '1',
         });
};
 </script>
</html>

输出

输出图像显示了插入的数据，并通过事件调用IndexedDB到浏览器。

Javascript 将数据插入indexedDB

结论

在indexedDB中插入数据是保存信息的重要部分。我们可以使用put()方法的javascript函数插入信息。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 精选教程