在现代 Web 应用程序中，数据存储是必不可少的一部分。传统的 cookie 和本地存储虽然能够存储一些简单的数据，但是在数据量大、数据结构复杂的情况下，它们的表现并不理想。而 indexedDB 是一种更加强大、灵活的 Web 存储方案，它能够存储更加复杂和大量的数据，并且支持事务和索引等高级特性。本文将详细介绍 PWA 中的 indexedDB 数据存储与读取。
indexedDB 简介
indexedDB 是一种基于对象存储的高级 Web 存储方案，它提供了一个异步的 API，允许 Web 应用程序存储和检索大量的结构化数据，而不需要依赖于 Web 服务器。indexedDB 支持事务和索引等高级特性，可以存储复杂的数据结构，如对象、数组等等。
与传统的 Web 存储方案不同，indexedDB 是一种 NoSQL 数据库，它不使用表格或行的概念，而是使用对象存储的概念。在 indexedDB 中，每个数据库都有一个或多个对象存储空间，每个对象存储空间都包含多个对象存储对象，每个对象存储对象都包含多个存储值。这些存储值可以是任何 JavaScript 对象，包括原始类型、对象和数组。
indexedDB 的基本使用
indexedDB 的基本使用包括以下几个步骤：
- 打开数据库：使用
indexedDB.open()方法打开一个数据库，如果数据库不存在，则会创建一个新的数据库。打开数据库时，可以指定数据库的名称和版本号。
-- -------------------- ---- ------- ----- ------ - ------------- ----- --------- - -- ----- ------- - ---------------------- ----------- --------------- - ------- -- - ------------------- -- ---- ----------- -- ----------------- - ------- -- - ----- -- - -------------------- --------------------- ------ --------------- --
- 创建对象存储空间：使用
db.createObjectStore()方法创建一个对象存储空间。对象存储空间包含多个对象存储对象，每个对象存储对象都包含多个存储值。对象存储空间可以设置键路径和自动增量键等属性。
request.onupgradeneeded = (event) => {
const db = event.target.result;
const objectStore = db.createObjectStore('customers', { keyPath: 'id', autoIncrement: true });
console.log('Object store created successfully');
};- 添加数据：使用
objectStore.add()方法向对象存储空间中添加数据。添加数据时，需要指定数据和键（如果没有设置自动增量键）。
-- -------------------- ---- ------- ----- ----------- - ----------------------------- ------------- ----- ----------- - ------------------------------------- ----- -------- - - ----- ----- ----- ------ ---------------------- -- ----- ------- - -------------------------- --------------- - ------- -- - ------------------- -- --- ----------- -- ----------------- - ------- -- - --------------------- ----- --------------- --
- 读取数据：使用
objectStore.get()方法从对象存储空间中读取数据。读取数据时，需要指定键。
-- -------------------- ---- ------- ----- ----------- - ----------------------------- ------------ ----- ----------- - ------------------------------------- ----- ------- - ------------------- --------------- - ------- -- - ------------------- -- --- ----------- -- ----------------- - ------- -- - ----- -------- - -------------------- ------------------------ ---------- --
PWA 中的 indexedDB
在 PWA 中，indexedDB 可以用于存储离线数据、缓存数据、以及在后台处理数据等场景。下面将介绍几种常见的使用场景。
存储离线数据
在 PWA 中，indexedDB 可以用于存储离线数据，以便在无网络连接时仍然可以访问应用程序。例如，我们可以将用户最近浏览过的文章存储在 indexedDB 中，以便在离线时可以继续访问这些文章。
-- -------------------- ---- -------
----- ------ - -------------
----- --------- - --
----- --------------- - -----------
----- ------------ - ----- -- -- -
----- -- - ----- -------------------- -----------
----- ----------- - ------------------------------------- - -------- ----- -------------- ---- ---
------------------- ----- ------- ---------------
--
----- ---------- - ----- --------- -- -
----- -- - ----- -------------------- -----------
----- ----------- - --------------------------------- -------------
----- ----------- - -----------------------------------------
----- ------- - -------------------------
------ --- ----------------- ------- -- -
--------------- - ------- -- -
---------- ------------- -- --- -----------
--
----------------- - ------- -- -
-----------------------------
--
---
--
----- ----------- - ----- -- -- -
----- -- - ----- -------------------- -----------
----- ----------- - --------------------------------- ------------
----- ----------- - -----------------------------------------
----- ------- - ---------------------
------ --- ----------------- ------- -- -
--------------- - ------- -- -
---------- ------------- -- --- ------------
--
----------------- - ------- -- -
-----------------------------
--
---
--
----- ------------ - ----- ------ -------- -- -
------ --- ----------------- ------- -- -
----- ------- - -------------------- ---------
--------------- - ------- -- -
---------- ------------- -- ---- ------------
--
----------------- - ------- -- -
----- -- - --------------------
------------
--
----------------------- - ------- -- -
----- -- - --------------------
----- ----------- - ------------------------------------- - -------- ----- -------------- ---- ---
------------------- ----- ------- ---------------
--
---
--缓存数据
在 PWA 中，indexedDB 还可以用于缓存数据，以便在网络较慢或不稳定时更快地加载应用程序。例如，我们可以将应用程序的静态资源（如 CSS 文件、JavaScript 文件、图像等）存储在 indexedDB 中，以便在下一次加载时更快地加载这些资源。
-- -------------------- ---- -------
----- ------ - -------------
----- --------- - --
----- --------------- - --------
----- ------------ - ----- -- -- -
----- -- - ----- -------------------- -----------
----- ----------- - ------------------------------------- - -------- ----- ---
------------------- ----- ------- ---------------
--
----- ------------- - ----- ----- --------- -- -
----- -- - ----- -------------------- -----------
----- ----------- - --------------------------------- -------------
----- ----------- - -----------------------------------------
----- ------- - ----------------- ---- -------- ---
------ --- ----------------- ------- -- -
--------------- - ------- -- -
---------- ------------- -- ----- ------------
--
----------------- - ------- -- -
-----------------------------
--
---
--
----- ----------------- - ----- ----- -- -
----- -- - ----- -------------------- -----------
----- ----------- - --------------------------------- ------------
----- ----------- - -----------------------------------------
----- ------- - ---------------------
------ --- ----------------- ------- -- -
--------------- - ------- -- -
---------- ------------- -- --- ------ ------------
--
----------------- - ------- -- -
----- -------------- - --------------------
---------------------- - ----------------------- - ------
--
---
--
----- ------------ - ----- ------ -------- -- -
------ --- ----------------- ------- -- -
----- ------- - -------------------- ---------
--------------- - ------- -- -
---------- ------------- -- ---- ------------
--
----------------- - ------- -- -
----- -- - --------------------
------------
--
----------------------- - ------- -- -
----- -- - --------------------
----- ----------- - ------------------------------------- - -------- ----- ---
------------------- ----- ------- ---------------
--
---
--在后台处理数据
在 PWA 中，indexedDB 还可以用于在后台处理数据。例如，我们可以将用户提交的数据存储在 indexedDB 中，以便在网络不稳定或应用程序关闭时仍然可以处理这些数据。
-- -------------------- ---- -------
----- ------ - -------------
----- --------- - --
----- --------------- - --------
----- ------------ - ----- -- -- -
----- -- - ----- -------------------- -----------
----- ----------- - ------------------------------------- - -------- ----- -------------- ---- ---
------------------- ----- ------- ---------------
--
----- ------- - ----- ------ -- -
----- -- - ----- -------------------- -----------
----- ----------- - --------------------------------- -------------
----- ----------- - -----------------------------------------
----- ------- - ----------------------
------ --- ----------------- ------- -- -
--------------- - ------- -- -
---------- ------------- -- --- --------
--
----------------- - ------- -- -
-----------------------------
--
---
--
----- -------- - ----- -- -- -
----- -- - ----- -------------------- -----------
----- ----------- - --------------------------------- ------------
----- ----------- - -----------------------------------------
----- ------- - ---------------------
------ --- ----------------- ------- -- -
--------------- - ------- -- -
---------- ------------- -- --- ---------
--
----------------- - ------- -- -
-----------------------------
--
---
--
----- ---------- - ----- ---- -- -
----- -- - ----- -------------------- -----------
----- ----------- - --------------------------------- -------------
----- ----------- - -----------------------------------------
----- ------- - -----------------------
------ --- ----------------- ------- -- -
--------------- - ------- -- -
---------- ------------- -- ------ --------
--
----------------- - ------- -- -
----------
--
---
--
----- ------------ - ----- ------ -------- -- -
------ --- ----------------- ------- -- -
----- ------- - -------------------- ---------
--------------- - ------- -- -
---------- ------------- -- ---- ------------
--
----------------- - ------- -- -
----- -- - --------------------
------------
--
----------------------- - ------- -- -
----- -- - --------------------
----- ----------- - ------------------------------------- - -------- ----- -------------- ---- ---
------------------- ----- ------- ---------------
--
---
--总结
本文介绍了 PWA 中的 indexedDB 数据存储与读取。我们首先介绍了 indexedDB 的基本概念和使用方法，包括打开数据库、创建对象存储空间、添加数据和读取数据等基本操作。然后，我们介绍了 indexedDB 在 PWA 中的常见使用场景，包括存储离线数据、缓存数据和在后台处理数据等。通过本文的学习，读者可以深入了解 indexedDB 的高级特性，并了解如何在 PWA 中使用 indexedDB 存储和读取数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ff9bc4d10417a222acfc7f