随着 PWA (Progressive Web Apps) 技术的发展，越来越多的 Web 应用开始具备类似原生应用的体验，比如离线可访问、推送通知等功能。其中，支持本地化存储是 PWA 应用的关键功能之一，本文将介绍如何在 PWA 应用中实现本地化存储。
一、什么是本地化存储
本地化存储（Local Storage）指的是将数据存储在用户浏览器本地的一种技术，通常用来存储一些用户数据，比如设置、历史记录等信息。在 PWA 应用中，本地化存储还可以用来存储应用数据，从而提高应用的性能和用户体验。
在 Web 开发中，本地化存储主要有以下几种方式：
Cookie
Cookie 是一种最早出现的本地化存储技术，它可以存储小数据，并且可以设置过期时间。但是 Cookie 的缺点是存储空间有限，并且会被浏览器拦截，不适合用来存储大量数据。
Web Storage
Web Storage 是 HTML5 中新增的本地化存储方式，包括 localStorage 和 sessionStorage 两种。localStorage 可以用来存储长期数据，而 sessionStorage 则用来存储会话级别的数据。
IndexedDB
IndexedDB 是 HTML5 中的一种高级本地化存储技术，它提供完整的数据存储机制，支持事务和索引。但是 IndexedDB 的 API 比较复杂，需要学习一些新的概念，不太适合初学者。
二、在 PWA 应用中使用 Web Storage
LocalStorage 是 PWA 应用中最常用的本地化存储方式，下面介绍如何在 PWA 应用中使用 LocalStorage。
1. 存储数据
使用 LocalStorage 存储数据非常简单，只需要调用 localStorage.setItem(key, value) 方法即可。例如，以下代码可以将 "hello world" 存储到 LocalStorage 中：
localStorage.setItem("text", "hello world");2. 获取数据
获取数据也非常简单，只需要调用 localStorage.getItem(key) 方法即可。例如，以下代码可以从 LocalStorage 中获取 "text" 的值：
var text = localStorage.getItem("text"); // text = "hello world"3. 移除数据
如果需要移除 LocalStorage 中的数据，只需要调用 localStorage.removeItem(key) 方法即可。
localStorage.removeItem("text");4. 清空数据
如果需要清空 LocalStorage 中的所有数据，只需要调用 localStorage.clear() 方法即可。
localStorage.clear();
三、在 PWA 应用中使用 IndexedDB
IndexedDB 是一种高级的本地化存储技术，可以存储大量数据，并提供事务和索引等功能。
下面介绍如何在 PWA 应用中使用 IndexedDB：
1. 打开数据库
在使用 IndexedDB 之前，需要先打开一个数据库。
var request = indexedDB.open("myDatabase", 1);2. 新增表格
可以使用 createObjectStore() 方法创建一个新的表格。
request.onupgradeneeded = function(event) {
var db = event.target.result;
var objectStore = db.createObjectStore("customers", { keyPath: "id" });
};3. 新增数据
使用 add() 方法向表格中添加一行数据。
request.onsuccess = function(event) {
var db = event.target.result;
var transaction = db.transaction(["customers"], "readwrite");
var objectStore = transaction.objectStore("customers");
var request = objectStore.add({ id: 1, name: "Tom", age: 20 });
};4. 读取数据
使用 get() 方法从表格中读取一行数据。
-- -------------------- ---- -------
----------------- - --------------- -
--- -- - --------------------
--- ----------- - ----------------------------- ------------
--- ----------- - -------------------------------------
--- ------- - -------------------
----------------- - --------------- -
---------------------------------
--
--5. 修改数据
使用 put() 方法修改表格中的一行数据。
-- -------------------- ---- -------
----------------- - --------------- -
--- -- - --------------------
--- ----------- - ----------------------------- -------------
--- ----------- - -------------------------------------
--- ------- - -------------------
----------------- - --------------- -
--- ---- - --------------------
--------- - --------
--- ------------- - ----------------------
----------------------- - --------------- -
------------------- ----------
--
--
--6. 删除数据
使用 delete() 方法删除表格中的一行数据。
-- -------------------- ---- -------
----------------- - --------------- -
--- -- - --------------------
--- ----------- - ----------------------------- -------------
--- ----------- - -------------------------------------
--- ------------- - ----------------------
----------------------- - --------------- -
------------------- ----------
--
--结论
本文介绍了 PWA 应用中本地化存储的两种方式：Web Storage 和 IndexedDB。Web Storage 是一种简单易用的本地化存储方式，适合存储小量数据和用户设置等信息；而 IndexedDB 则是一种高级的本地化存储方式，适合存储大量数据和复杂的应用数据。
根据不同的需求，选择合适的本地化存储方式，可以提高 PWA 应用的性能和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67399b14317fbffedf17a191