将数据插入 JavaScript indexedDB

2025年3月18日 | 阅读 5 分钟

我们可以使用 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 事件处理程序的请求中使用以下语法：

如果您在 Web 浏览器中查看 index.html 文件，脚本标签中的代码将运行，用于：

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

示例

以下示例保存单个和多个值。在这里，我们使用 put() 方法来：

插入数据。

示例 1

该示例显示了浏览器通过一个称为 JavaScript 的事件支持 IndexedDb。该函数使用 insert 事件来存储单个数据。

<!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 连接到浏览器。

示例 2

该示例显示了浏览器通过一个称为 JavaScript 的事件支持 IndexedDb。该函数使用 insert 事件来存储多列数据。

<!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 连接到浏览器。

示例 3

该示例插入了 Names 和 Rank 两列，但未插入 email 列。该函数使用 insert 事件来存储多列数据。

<!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 连接到浏览器的事件。

结论

在 IndexedDB 中插入数据是保存信息的重要组成部分。我们可以使用 JavaScript 函数和 put() 方法来插入信息。

下一主题JavaScript 指数运算符

← 上一个下一个 →

将数据插入 JavaScript indexedDB

在 JavaScript IndexedDB 中插入数据的过程

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

将数据插入 JavaScript indexedDB

在 JavaScript IndexedDB 中插入数据的过程

语法

示例

结论

相关帖子

JavaScript hasOwnProperty

JavaScript 一等公民函数

如何使用 JavaScript 为元素添加类

如何打开 JSON 文件

JAVASCRIPT TRIGGER CLICK

如何使用 JavaScript 计算圆的周长和面积

JavaScript 中的斐波那契数列

JavaScript removeChild

JavaScript 调用栈

Npm uninstall 命令

订阅 Tpoint Tech

联系信息

关注我们