HTML5 IndexedDB索引数据库的工作原理是什么？

HTML5的IndexedDB是一种低级API，用于在用户的浏览器中存储大量结构化数据。它允许开发者创建、读取、更新和删除数据库中的记录。

HTML5的IndexedDB索引数据库详解

IndexedDB简介

IndexedDB 是一种基于浏览器的 NoSQL 数据库，旨在提供客户端的持久化存储，它允许开发者存储大量结构化数据，如对象、数组和文件等，IndexedDB 适用于需要离线访问或处理复杂查询的 Web 应用。

核心特性

1、键值对存储：数据以键值对的形式存储在 object store（对象存储）中，每个数据记录都有一个唯一的主键。

2、异步操作：所有操作都是异步的，不会阻塞 UI 线程，确保了应用的流畅性。

3、事务支持：所有数据操作必须在事务内完成，以确保数据的一致性和完整性。

4、版本控制：通过版本号管理数据库架构，便于更新和维护。

5、索引功能：支持对数据字段建立索引，加快查询速度。

6、离线支持：数据可以持久化存储并在断网情况下继续访问，非常适合构建离线 Web 应用。

7、二进制数据存储：不仅支持字符串数据，还可以存储二进制数据（ArrayBuffer 对象和 Blob 对象）。

8、同源限制：IndexedDB 受到同源限制，即每个数据库只能由创建它的域名访问。

9、存储空间大：通常不少于 250MB，甚至没有上限。

基本概念

1、数据库（IDBDatabase）：一系列相关数据的容器，每个域名都可以新建任意多个数据库。

2、对象仓库（IDBObjectStore）：每个数据库包含若干个对象仓库，类似于关系型数据库中的表格。

3、数据记录（IDBKeyRange）：对象仓库保存的是数据记录，每条记录有主键和数据体两部分。

4、索引（IDBIndex）：用于加快查询速度。

5、事务（IDBTransaction）：数据记录的读写和删改都要通过事务完成。

6、操作请求（IDBRequest）：几乎所有 indexedDB 操作的返回值，用于处理操作结果。

7、指针（IDBCursor）：用于遍历 object store。

基本操作

1、打开/创建数据库：使用indexedDB.open() 方法打开现有数据库或创建新数据库。

2、创建对象仓库：在onupgradeneeded 事件中创建对象仓库（表）并设置主键。

3、添加数据：使用objectStore.add() 方法向对象仓库中添加数据。

4、查询数据：使用objectStore.get() 方法根据键值从对象仓库中获取数据。

5、更新数据：使用objectStore.put() 方法更新现有记录，若记录不存在则插入。

6、删除数据：使用objectStore.delete() 方法根据键值删除记录。

7、创建索引：使用objectStore.createIndex() 为对象仓库中的字段创建索引。

8、事务操作：使用db.transaction() 创建事务，指定对象仓库名称和事务模式（readonly 或 readwrite）。

IndexedDB与LocalStorage对比

特性	IndexedDB	LocalStorage
存储方式	键值对形式存储复杂数据对象	键值对形式存储字符串数据
API	异步 API，不会阻塞 UI 线程	同步 API，会阻塞 UI 线程
数据容量	大于 LocalStorage，通常不少于 250MB	小，2.5MB 到 10MB
搜索功能	支持索引，可进行复杂查询	不支持索引，只能通过键名查找
数据类型	支持二进制数据存储	只支持字符串数据存储
适用场景	适合存储大量结构化数据，支持离线应用	适合存储少量简单数据

实例分析

以下是一个完整的 IndexedDB 实例，包括打开数据库、创建对象仓库、添加和查询数据等操作：

 // 检查浏览器是否支持 IndexedDB var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; if (!indexedDB) {     alert("Your browser doesn't support IndexedDB"); } // 打开或创建数据库 var openRequest = indexedDB.open("myDatabase", 1); openRequest.onerror = function(event) {     console.error("Error opening database:", event.target.error); }; openRequest.onsuccess = function(event) {     var db = event.target.result;     console.log("Successfully opened database"); }; openRequest.onupgradeneeded = function(event) {     var db = event.target.result;     var objectStore = db.createObjectStore("users", { keyPath: "id" });     objectStore.createIndex("nameIndex", "name", { unique: false });     objectStore.createIndex("ageIndex", "age", { unique: false }); }; // 添加数据 function addData() {     var transaction = db.transaction(["users"], "readwrite");     var objectStore = transaction.objectStore("users");     var request = objectStore.add({ id: 1, name: "John Doe", age: 30 });     request.onsuccess = function(event) {         console.log("Data added successfully");     };     request.onerror = function(event) {         console.error("Error adding data:", event.target.error);     }; } // 查询数据 function getData() {     var transaction = db.transaction(["users"]);     var objectStore = transaction.objectStore("users");     var request = objectStore.get(1);     request.onsuccess = function(event) {         console.log("Data retrieved:", event.target.result);     };     request.onerror = function(event) {         console.error("Error retrieving data:", event.target.error);     }; }

FAQs

Q1: IndexedDB 和 LocalStorage 有什么区别？

A1: IndexedDB 和 LocalStorage 的主要区别在于存储方式、API、数据容量和搜索功能，IndexedDB 采用键值对形式存储复杂数据对象，支持异步 API，数据容量较大且支持索引和复杂查询，而 LocalStorage 只能存储字符串数据，API 同步，数据容量较小且不支持索引，IndexedDB 更适合存储大量结构化数据和离线应用，LocalStorage 适合存储少量简单数据。

Q2: 如何在 IndexedDB 中创建和使用索引？

A2: 在 IndexedDB 中创建索引可以使用objectStore.createIndex() 方法，该方法接受三个参数：索引名称、索引属性字段名和一个可选的 JSON 对象，用于指定索引的唯一性，创建索引的示例代码如下：

 var objectStore = db.createObjectStore("users", { keyPath: "id" }); objectStore.createIndex("nameIndex", "name", { unique: false });

使用索引可以通过游标（cursor）来遍历匹配的记录，

 var transaction = db.transaction(["users"]); var objectStore = transaction.objectStore("users"); var index = objectStore.index("nameIndex"); var request = index.openCursor(IDBKeyRange.only("John")); request.onsuccess = function(event) {     var cursor = event.target.result;     if (cursor) {         console.log("Matching record:", cursor.value);         cursor.continue();     } else {         console.log("No more matching records");     } };

HTML5 IndexedDB 索引数据库深入解析

IndexedDB 是一种低级 API，用于在用户的浏览器中存储大量结构化数据，它提供了一个类似数据库的环境，允许用户存储和检索大量数据，IndexedDB 在 HTML5 中引入，旨在提供一种比传统的键值存储（如 localStorage）更加强大和灵活的数据存储解决方案。

IndexedDB 的基本概念

1. 数据存储结构

IndexedDB 是一个键值存储系统，但与传统的键值存储不同，它支持数据索引，这使得查询操作更加高效。

数据库（Database）：存储数据的地方。

对象仓库（Object Store）：数据库中的一个容器，用于存储具有相同结构的数据。

索引（Index）：帮助快速检索数据的键。

2. 数据类型

IndexedDB 支持以下几种数据类型：

字符串（String）

浮点数（Float）

整数（Integer）

二进制数据（ArrayBuffer）

对象（Object）

IndexedDB 的操作

1. 打开数据库

 var openRequest = indexedDB.open('myDatabase', 1); openRequest.onupgradeneeded = function(e) {   var db = e.target.result;   // 创建或升级数据库结构 }; openRequest.onerror = function(e) {   console.error('Database error: ', e.target.error); };

2. 创建对象仓库

 var db = openRequest.result; var objectStore = db.createObjectStore('myObjectStore', {keyPath: 'id'});

3. 添加数据

 var transaction = db.transaction(['myObjectStore'], 'readwrite'); var store = transaction.objectStore('myObjectStore'); var putRequest = store.put({id: 1, name: 'Alice'}); putRequest.onsuccess = function(e) {   console.log('Data saved'); }; putRequest.onerror = function(e) {   console.error('Error saving data: ', e.target.error); };

4. 查询数据

 var transaction = db.transaction(['myObjectStore'], 'readonly'); var store = transaction.objectStore('myObjectStore'); var getRequest = store.get(1); getRequest.onsuccess = function(e) {   if (getRequest.result) {     console.log('Data retrieved:', getRequest.result);   } else {     console.log('No data found');   } }; getRequest.onerror = function(e) {   console.error('Error retrieving data: ', e.target.error); };

5. 更新数据

 var transaction = db.transaction(['myObjectStore'], 'readwrite'); var store = transaction.objectStore('myObjectStore'); var putRequest = store.put({id: 1, name: 'Alice Updated'}); putRequest.onsuccess = function(e) {   console.log('Data updated'); }; putRequest.onerror = function(e) {   console.error('Error updating data: ', e.target.error); };

6. 删除数据

 var transaction = db.transaction(['myObjectStore'], 'readwrite'); var store = transaction.objectStore('myObjectStore'); var deleteRequest = store.delete(1); deleteRequest.onsuccess = function(e) {   console.log('Data deleted'); }; deleteRequest.onerror = function(e) {   console.error('Error deleting data: ', e.target.error); };

IndexedDB 是一个功能强大的数据存储解决方案，它提供了对大量结构化数据的存储和检索能力，通过理解其基本概念和操作，开发者可以有效地使用 IndexedDB 来构建高性能的应用程序。