浏览器数据库——IndexedDB的使用

谈论到前端的数据缓存，大多数人第一想到的就是Web Storage 或 Cookie，也是开发过程中常用的。可当我们有一个缓存超大数据的时候，以上两个就完全无法帮助我们了，而此时为何不试试IndexedDB？

什么是IndexedDB？

IndexedDB（Indexed Database）是一种用于在浏览器中存储和管理结构化数据的Web API。它提供了一种持久性的客户端存储解决方案，允许Web应用程序在浏览器中存储大量的数据，以便在不同的浏览会话之间保持状态、离线使用数据以及缓存数据。

储存空间大小

IndexedDB 存储空间的大小通常在几十兆字节到几百兆字节之间，但请注意，浏览器可能会对每个域名或源设置不同的存储配额，并且用户可能会手动设置存储空间限制。

储存时间

IndexedDB 数据是持久性的，它不会随着页面关闭或浏览器重启而丢失。

IndexedDB使用

IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象数据库。

IndexedDB 允许存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。

基础API

// 打开一个名为 "myDB" 的数据库，第一参数为名称，第二参数为版本号，没有可打开的数据库会自动创建
let request = indexedDB.open("myDB", 1);

// 当数据库创建和升级时触发 onupgradeneeded 事件
request.onupgradeneeded = function(event) {
  let db = event.target.result;
  
  // 创建一个名为 "myStore" 的对象存储空间，也可理解为创建一张表，名称，配置
  let store = db.createObjectStore("myStore", { keyPath: "id" });
  
  // 创建一个索引，用于按照姓名（name）进行检索
  // createIndex还有第三个入参，指定其他索引的选项，比如createIndex("nameIndex", "name", { unique: false });索引中允许存在重复的值（非唯一）
  store.createIndex("nameIndex", "name");
};
 
// 当数据库打开成功时触发 onsuccess 事件
request.onsuccess = function(event) {
  let db = event.target.result;
  
  // 创建一个事务，并指定要操作的对象存储空间（类似于表）
  // readonly - 增查； readwrite - 增删改查
  let transaction = db.transaction(["myStore"], "readwrite");
  
  // 获取指定名称的对象存储空间
  let store = transaction.objectStore("myStore");
  
  // 存储一条数据到对象存储空间
  // 还能执行诸如 add、put、get、delete 等操作来操作数据库中的数据。
  store.add({ id: 1, name: "John" });
  
  // 提交事务
  transaction.oncomplete = function() {
    console.log("数据已存储成功！");
  };
};

request.onerror = function(event) {
  console.error("打开数据库失败:", event.target.error);
};

// 删除数据库
indexedDB.deleteDatabase('myDB')

request.onblocked = function() {
  console.log("数据库删除操作被阻止，可能有其他连接正在使用该数据库");
};

当然根据上面所提到的各种api和变量，其实都可以封装起来，做成一个单独的hooks之类的，比如db和store都已提出去。