谈论到前端的数据缓存,大多数人第一想到的就是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都已提出去。