JavaScript indexedDB

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

IndexedDB 是一个集成到浏览器中的大型对象存储。使用键值对，IndexedDB 允许您持久存储数据。任何 JavaScript 类型都可以用作值，例如布尔值、数字、文本、未定义、空值、日期、正则表达式、对象、数组、Blob 和文件。

IndexedDB 是存储在网络浏览器中的大型对象。IndexedDB 以键值对的形式存储数据。任何数据，无论是基本类型还是复杂类型，都可以用作值。

为什么要使用 indexedDB？

您可以使用 IndexedDB 构建可以在线和离线运行的 Web 应用程序。
对于需要存储大量数据但不需要持续互联网连接的应用程序，它会很有用。
例如，Google Docs 使用 IndexedDB 在浏览器中维护缓存内容，并定期与服务器同步。这在提高用户体验的同时，也让 Google Docs 表现更好。
此外，您还可以找到各种主要使用 IndexedDB 的程序，如在线记事本、代码沙盒、测试、待办事项列表和 CMS。

IndexedDB 架构

IndexedDB 的设计如下图所示

数据库

IndexedDB 的最高级别是数据库。数据库中包含一个或多个对象存储。

IndexedDB 中可以存在单个或多个数据库。对于 Web 应用程序，您通常会构建一个数据库。

数据对象存储

您可以将对象存储用作桶，以保持数据和相关索引的组织性。它与 SQL 数据库中的工作方式类似。

以键值对形式存储的记录保存在对象存储中。

索引

通过对象的属性可以搜索数据，这要归功于索引。从技术上讲，您在称为父对象存储的对象存储上构建索引。

例如，如果您正在存储联系信息，您可能希望为联系电子邮件、全名和地址创建索引，以便您可以使用这些条件进行搜索。

IndexedDB 原理

下面简要解释了 IndexedDB 的基本概念

1) IndexedDB 数据库保存键值对。

与 localStorage 和 sessionStorage 不同，IndexedDB 中存储的值可以是复杂结构，如对象和 Blob。

键也可以是二进制项，也可以是这些项的特征。

对象的任何属性都可以用于生成索引，以便于搜索和排序。

2) IndexedDB 支持事务

在读取或写入 IndexedDB 数据库时，始终会发生事务。

事务模型可确保数据完整性，从而保护同时在两个选项卡或窗口中启动 Web 应用程序并从数据库读取和写入相同数据库的用户。

3) IndexedDB API 主要是异步的。

IndexedDB 使用异步操作。当操作完成且输出可用时，它会使用 DOM 事件通知您。

4) NoSQL 系统 IndexedDB

IndexedDB 使用 NoSQL 技术。换句话说，它不使用 SQL 来查询数据。

它使用返回游标的查询。然后，您可以使用指针迭代结果集。

5) IndexedDB 遵循同源规则

来源是包含协议、域和执行代码的端口的页面 URL。

域名：javatpoint.com
协议：https
端口：443

IndexedDB 遵循同源原则。这意味着每个来源都有一组独特的数据库。此外，一个来源无法访问不同来源的数据库。

逐步开发项目结构。

首先，在新文件夹中创建一个名为 indexeddb 的文件夹。在 indexeddb 文件夹中创建一个名为 js 的新子文件夹。
其次，在 js 文件夹中创建 javascript，在 indexeddb 文件夹中创建 html 文件。
第三，在 index.html 文件中插入 <script> 标签以链接到 app.js 文件，或使用 <script> 标签编写 javascript 代码。

文件名：Demo.html

<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<title> JavaScript IndexedDB </title>
</head>
<body>
<script src = "pathname/js/filename.js"> </script>
Or
<script> //javascript indexedDB code </script>
</body>
</html>

IndexedDB 基本操作

以下提供了 IndexedDB 数据库基本操作的概述，包括。

建立数据库连接
向对象存储添加内容。
从对象存储中取出信息。
使用游标遍历一组结果。
从对象数据库中删除一条数据。

让我们首先构建项目结构，然后再在 IndexedDB 数据库中创建连接。

以下步骤适用于 indexedDB 操作和设置。

1) 验证是否支持 IndexedDB。

以下代码验证 Web 浏览器对 IndexedDB 的支持。这可能不再需要，因为大多数现代 Web 浏览器都接受或支持 IndexedDB。

if (!window.indexedDB) {
    console.log(` Your browser does not accept IndexedDB`);
    return;
}

2) 打开数据库

浏览器的 open() 方法用于建立数据库连接。

open() 函数可以传递两个参数。

“tutorial_data”是 indexedDB 数据库名称。
1 是 indexedDB 数据库版本。

IDBOpenDBRequest 接口的 open() 方法接受一个请求对象，该对象是该接口的一个实例。

该调用返回一个名为 openRequest 的对象，我们应该监听其事件

成功：显示数据库已准备就绪。“数据库对象”存在于 openRequest.result 中，用于后续调用。

request_variable.onerror = function(event) {
console.log(" The function shows error! ");
};

错误：打开错误失败。

request_variable.onsuccess = function(event) {
console.log(" The function shows success! ");
};

3) 建立对象存储

当您第一次打开数据库时，可能会引发 onupgradeneeded 事件。
如果以高于当前版本的版本第二次尝试打开数据库，也会发生 onupgradeneeded 事件。
“onupgradeneeded 事件处理程序”可用于首次初始化对象存储和索引。
例如，以下 onupgradeneeded 事件处理程序创建 Contacts 对象存储及其索引。

// create the names object store and indexes
 request.onupgradeneeded = (event) => {
     let db_variable = event.target.result;
     // create the Name object store 
     // with auto-increment id
     let store_varible = db_variable.createObjectStore('Rank', {
         autoIncrement: true
     });
     // create an index on the rank property
     let index = store_varible.createIndex('name', ' name', {
         unique: true
     });
 };

工作原理

首先获取 IDBDatabase 对象，然后将其从 event.target.result 添加到 db_variable。

自增 id

然后，应该第二次调用 createObjectStore() 函数，创建带有自增键的 Name 对象存储。

对于输入到 Name 对象存储中的每个新对象，IndexedDB_VARIABLE 可以创建一个从 1 开始的自增数字作为键。

要建立 rank 属性的索引，请执行 createIndex() 方法。
由于每个 rank 都是唯一的，因此索引也应该是唯一的。
您可以通过传递 createIndex() 方法的第三个参数 (unique: true) 来实现这一点。

4) 使用对象存储插入、读取和删除数据

用户可以使用 javascript 函数和 indexedDB 方法插入、读取、删除和操作数据库信息。

示例

以下示例展示了 IndexedDb 操作、函数和输出。在这里我们可以看到基本操作及其使用不同示例的工作过程。

示例 1

该示例使用 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>
<p id = "demos"> </p>
</body>
<script>
if (!window.indexedDB) {
console.log("The browser does not support IndexedDB");
alert("Your browser does not support IndexedDB");
document.getElementById("demos").innerHTML = "Your browser does not support IndexedDB";
}else{
console.log("Your browser support IndexedDB");
alert("Your browser support IndexedDB");
document.getElementById("demos").innerHTML = "Your browser support IndexedDB";
}
</script>
</html>

输出

输出图片显示了浏览器支持 IndexedDB 的结果。

示例 2

该示例显示浏览器支持带有名为 javascript 的事件的 IndexedDb。该函数获取错误、成功或升级事件是否被调用。如果数据库成功操作和维护数据，则成功函数在 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>
<p id = "demos"> </p>
<p id = "demo2"> </p>
</body>
<script>
if (!window.indexedDB) {
document.getElementById("demos").innerHTML = "Your browser does not support IndexedDB";
}else{
document.getElementById("demos").innerHTML = "Your browser support IndexedDB";
}
var request_variable = window.indexedDB.open("newData", 1);
request_variable.onerror = function(event) {
console.log(" The function shows error! ");
document.getElementById("demo2").innerHTML = "The function shows error!";
};
request_variable.onsuccess = function(event) {
console.log(" The function shows success! ");
document.getElementById("demo2").innerHTML = "The function shows success!";
};
request_variable.onupgradeneeded = function(event) {
console.log(" The function shows upgraded! ");
}
</script>
</html>

输出

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

示例 3

该示例显示浏览器支持带有名为 javascript 的事件的 IndexedDb。该函数在获取任何错误后获取错误函数。如果在 indexedDB 中可用性和其他方法显示任何错误，则 onerror 函数在 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>
<p id = "demo3"> </p>
</body>
<script>
if (!window.indexedDB) {
document.getElementById("demos").innerHTML = "Your browser does not support IndexedDB";
}else{
document.getElementById("demos").innerHTML = "Your browser support IndexedDB";
}
var request_variable = window.indexedDB.open("newData", 1);
request_variable.onerror = function(event) {
console.log(" The function shows error! ");
document.getElementById("demo2").innerHTML = "The function shows error!";
};
request_variable.onsuccess = function(event) {
console.log(" The function shows success! ");
document.getElementById("demo2").innerHTML = "The function shows success!"+request_variable;
};
</script>
</html>

输出

输出图片显示了 IndexedDB 向浏览器发送的错误消息。

示例 4

该示例显示浏览器支持带有名为 javascript 的事件的 IndexedDb。该函数在更新数据库版本后获取升级函数。如果您将数据库版本从 1 更改为 2，则会调用 onupgradeneeded 函数。

<!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>
<p id = "demo3"> </p>
</body>
<script>
if (!window.indexedDB) {
document.getElementById("demos").innerHTML = "Your browser does not support IndexedDB";
}else{
document.getElementById("demos").innerHTML = "Your browser support IndexedDB";
}
//the database name with the second version 
var request_variable = window.indexedDB.open("newData2", 2);
request_variable.onerror = function(event) {
console.log(" The function shows error! ");
document.getElementById("demo2").innerHTML = "The function shows error!";
};
//the transaction of the database successfully
request_variable.onsuccess = function(event) {
console.log(" The function shows success! ");
document.getElementById("demo2").innerHTML = "The function shows success!"+request_variable;
};
//the indexedDB database upgrade with the version
request_variable.onupgradeneeded = function(event) {
console.log(" The function shows upgraded! ");
document.getElementById("demo3").innerHTML = "The function shows upgraded!";
}
</script>
</html>

输出

输出图片显示了 IndexedDB 向浏览器发送的升级消息。

示例 5

该示例显示浏览器支持带有名为 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>
<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 insertContact(db_variable, name) {
// create a new transaction for 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);
// handle success of the transaction
db_que.onsuccess = function (event) {
console.log(event);
};
// handle the error of the transaction
db_que.onerror = function (event) {
console.log(event.target.errorCode);
}
// close the database when the transaction completes
text_data.oncomplete = function () {
db_variable.close();
};
}
request.onsuccess = (event) => {
const db_variable = event.target.result;
const db_variable1 = event.target;
const db_variable2 = event.type;
console.log("create object and store data " +db_variable);
console.log("create object and get target " +db_variable1);
console.log("create  type object "+ db_variable2);
};
</script>
</html>

输出

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

总结

IndexedDB 由数据库组成。每个数据库中都存在对象存储。通常，每个 Web 应用程序都会创建一个 IndexedDB 数据库。

不需要持续互联网连接的 Web 应用程序可以受益于使用 IndexedDB，尤其是那些可以在线和离线运行的应用程序。

下一主题Javascript offsetX 属性

JavaScript indexedDB

为什么要使用 indexedDB？

IndexedDB 架构

IndexedDB 原理

逐步开发项目结构。

IndexedDB 基本操作

1) 验证是否支持 IndexedDB。

2) 打开数据库

3) 建立对象存储

4) 使用对象存储插入、读取和删除数据

总结

联系信息

关注我们

教程

面试题

在线编译器

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

为什么要使用 indexedDB？

IndexedDB 架构

IndexedDB 原理

逐步开发项目结构。

IndexedDB 基本操作

1) 验证是否支持 IndexedDB。

2) 打开数据库

3) 建立对象存储

4) 使用对象存储插入、读取和删除数据

总结

相关帖子

如何迭代 JavaScript 对象

如何使用 JavaScript 绘制一条线

Underscore.js _.filter 函数

JavaScript Confirm

JavaScript 中的斐波那契数列

JavaScript 仅数字正则表达式

JavaScript 中的 mousemove 事件