对于 PWA（Progressive Web Apps）开发者而言，IndexedDB 的 API 可以让你在网页端存储大量的数据（例如离线缓存的资源或用户产生的数据），而不用担心数据的容量或性能。在本篇文章中，我们将探讨 PWA 开发中利用 IndexedDB 存储数据的最佳实践。
IndexedDB 简介
IndexedDB 是一个浏览器内置的 JavaScript 库，用于在客户端存储大量结构化数据。在开发过程中，IndexedDB 可以让开发者通过 JavaScript 代码来存储和检索数据，并不需要借助于第三方存储技术。
IndexedDB 中操作数据的方式可以看作是面向对象的，其中定义了两个核心对象：数据库和事务。数据库对象用于打开和关闭的数据库，而事务对象用于操作数据库，例如添加或删除数据或更改数据。
接下来我们将讨论如何在 PWA 开发中利用 IndexedDB 存储数据的最佳实践。
最佳实践
1. 首先需要检查是否支持 IndexedDB
IndexedDB 尽管是一个标准的 JavaScript 库，但是并不是所有的浏览器都支持该库。因此，在起用 IndexedDB 前，需要进行浏览器兼容性测试。
if (!window.indexedDB) { console.log("您的浏览器不支持 IndexedDB") }
2. 数据库的打开与关闭
在 IndexedDB 的使用中，打开数据库是必须的。打开数据库时可以有一些可选的参数，如数据库的名称、版本和以及数据库中可存储的对象的定义。
-- -------------------- ---- ------- --- ------- - ----------------------------------- --- --------------- - -------- ------- - ---------------------- ------ -- ----------------- - -------- ------- - -- - -------------------- ---------------------- --展开代码
在使用 IndexedDB 后，务必要关闭数据库，否则会占用过多的内存资源。
db.close(); console.log("数据库已关闭")
3. 数据库的升级与版本管理
IndexedDB 中的数据库版本号是一个升序整数，即建议每次需要对数据库进行修改时，增加数据库版本号。
let request = window.indexedDB.open("myDatabase", 2);
在进行版本升级时，可以使用 request.onupgradeneeded 事件处理器来实现升级的操作。在数据升级时，可以完成数据结构或数据的添加或删除等操作。
request.onupgradeneeded = function (event) { db = event.target.result; let objectStore = db.createObjectStore("person", { keyPath: "id", autoIncrement: true }); objectStore.createIndex("name", "name", {unique: true}); };
4. 对象存储和索引的使用
IndexedDB 中最重要的两个概念就是对象存储和索引。对象存储就是存储对象的一个容器，而索引可以帮助我们更快地查找对象。
添加数据到对象存储中，只需要打开事务，然后将数据添加到对象存储容器中即可。
let transaction = db.transaction(["person"], "readwrite"); let objectStore = transaction.objectStore("person"); let objectStoreRequest = objectStore.add({name: "张三", age: 18, email: "zhangsan@gmail.com"}); objectStoreRequest.onsuccess = function (event) { console.log("数据添加成功") };
创建或更新索引有助于提高数据查询的效率。
let objectStore = db.createObjectStore("person", { keyPath: "id", autoIncrement: true }); objectStore.createIndex("name", "name", {unique: true});
5. 对象存储和索引的检索和删除
检索的做法是打开事务和对象存储，调用 get() 方法来检索指定 ID 的记录。
-- -------------------- ---- ------- --- ----------- - --------------------------- --- ----------- - ---------------------------------- --- ------------------ - ------------------- ---------------------------- - -------- ------- - -- --------------------------- - ------------------------------------------- - ---- - -------------------- - --展开代码
要删除数据，同样先打开事务和对象存储，然后调用 remove() 方法来删除指定 ID 的记录即可。
let transaction = db.transaction(["person"], "readwrite"); let objectStore = transaction.objectStore("person"); let objectStoreRequest = objectStore.delete(1); objectStoreRequest.onsuccess = function (event) { console.log("删除成功") };
示例代码
-- -------------------- ---- ------- -- ------------------- - --------------------- ----------- - ---- - --- ------- - ----------------------------------- --- --- --- --------------- - -------- ------- - ---------------------- ------ -- ----------------- - -------- ------- - -- - -------------------- ---------------------- -- ----------------------- - -------- ------- - -- - -------------------- --- ----------- - ------------------------------ - -------- ----- -------------- ---- --- ------------------------------- ------- -------- ------- -- --- ----------- - -------------------------- ------------- --- ----------- - ---------------------------------- --- ------------------ - ---------------------- ----- ---- --- ------ ----------------------- ---------------------------- - -------- ------- - --------------------- -- --- --------------- - --------------------------- --- --------------- - -------------------------------------- --- ---------------------- - ----------------------- -------------------------------- - -------- ------- - -- ------------------------------- - ----------------------------------------------- - ---- - -------------------- - -- --- ----------------- - -------------------------- ------------- --- ----------------- - ---------------------------------------- --- ------------------------ - ---------------------------- ---------------------------------- - -------- ------- - ------------------- -- ----------- -展开代码
结语
以上便是 PWA 开发中利用 IndexedDB 存储数据的最佳实践，使用 IndexedDB 可以帮助我们存储和检索大量的离线数据，以及用户的产生的一些数据。随着 IndexedDB 的完善和普及，相信 IndexedDB 在未来 PWA 开发中将扮演更加重要的角色。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c8186fe46428fe9ee1986a
