使用 IndexedDB-技术圈

IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 Web Storage 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。

关键概念和用法

IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许你存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。你只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。

备注：正如大多数的 web 储存解决方案一样，IndexedDB 也遵守同源策略。因此当你在某个域名下操作储存数据的时候，你不能操作其他域名下的数据。

同步和异步

使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用程序。

使用 IndexedDB

IndexedDB 鼓励使用的基本模式如下所示：

1.打开数据库。2.在数据库中创建一个对象存储（object store）。3.启动事务，并发送一个请求来执行一些数据库操作，如添加或获取数据等。4.通过监听正确类型的 DOM 事件以等待操作完成。5.对结果进行一些操作（可以在 request 对象中找到）

// 打开我们的数据库const request = window.indexedDB.open("MyTestDatabase", 3);

为了获取数据库的访问权限，需要在 window 对象的 indexedDB 属性上调用 open() 方法。该方法返回一个 IDBRequest 对象；异步操作通过在 IDBRequest 对象上触发事件来和调用程序进行通信。

open 方法的二个参数是数据库的版本号。数据库的版本决定了数据库模式（schema），即数据库的对象存储（object store）以及存储结构。

1. 打开数据库连接：

// 打开或创建一个名为 "myDatabase" 的数据库，并指定版本号let request = indexedDB.open("myDatabase", 1);
// 当数据库需要升级时触发的事件request.onupgradeneeded = function(event) {    let db = event.target.result;
    // 创建一个名为 "myObjectStore" 的对象存储空间    let objectStore = db.createObjectStore("myObjectStore", { keyPath: "id" });};

2. 添加数据到数据库：

request.onsuccess = function(event) {    let db = event.target.result;
    // 开启一个事务    let transaction = db.transaction(["myObjectStore"], "readwrite");
    // 获取对象存储空间    let objectStore = transaction.objectStore("myObjectStore");
    // 添加数据    objectStore.add({ id: 1, name: "John Doe", age: 30 });};

3. 读取数据：

request.onsuccess = function(event) {    let db = event.target.result;
    // 开启一个只读事务    let transaction = db.transaction(["myObjectStore"], "readonly");
    // 获取对象存储空间    let objectStore = transaction.objectStore("myObjectStore");
    // 获取特定键对应的对象    let getRequest = objectStore.get(1);
    getRequest.onsuccess = function(event) {        let data = event.target.result;        console.log(data);    };};

4. 删除数据：

request.onsuccess = function(event) {    let db = event.target.result;
    // 开启一个读写事务    let transaction = db.transaction(["myObjectStore"], "readwrite");
    // 获取对象存储空间    let objectStore = transaction.objectStore("myObjectStore");
    // 删除特定键对应的对象    objectStore.delete(1);};

5. 关闭数据库连接：

request.onsuccess = function(event) {    let db = event.target.result;
    // 关闭数据库连接    db.close();};

这些是使用 IndexedDB 的基本操作步骤。您可以根据需要执行更复杂的操作，如索引、范围查询等。IndexedDB 提供了强大的客户端存储功能，适用于需要在客户端存储大量数据并进行高级查询的情况（比如游戏）。