作为一种新型的 Web 应用程序开发模式，PWA（Progressive Web App）具有很多优点，其中一点就是可以离线使用。为了实现这一点，PWA 需要使用本地存储技术。本文将介绍 PWA 中常用的本地存储方式，并提供示例代码。
LocalStorage
LocalStorage 是一种 HTML5 提供的本地存储方案，它可以将数据存储在客户端，即浏览器中。LocalStorage 的数据可以被 web 应用程序随时读取和修改，而不需要像 cookie 那样在每个 HTTP 请求中都发送到服务器。
LocalStorage 的使用非常简单，只需使用以下代码即可存储数据：
localStorage.setItem('key', 'value');其中的 "key" 和 "value" 都是字符串类型，可以根据实际需求进行修改。如果要读取数据，只需使用以下代码：
var value = localStorage.getItem('key');这里的 value 就是存储在 LocalStorage 中的值。
除了 setItem 和 getItem 方法外，还可以使用 removeItem 方法从 LocalStorage 中删除数据：
localStorage.removeItem('key');IndexDB
IndexDB 是一种更强大的本地存储技术，它可以存储大量数据，并支持索引查询。与 LocalStorage 不同的是，IndexDB 是一种 NoSQL 数据库，具有非常丰富的 CRUD 操作。但是相应的，它的使用也要复杂一些。
在使用 IndexDB 之前，需要先打开一个数据库：
var request = indexedDB.open('mydb', 1);这里的 "mydb" 就是数据库的名称。如果本地没有该数据库，则会创建一个新的数据库。如果已存在，则打开现有的数据库。这里的 1 是数据库的版本号。
打开数据库后，需要创建一个存储对象（object store）：
request.onupgradeneeded = function(e){
var db = request.result;
var store = db.createObjectStore('mystore', {keyPath:'id'});
store.createIndex('name', 'name', {unique:false});
};这里创建了一个名为 "mystore" 的存储对象，并指定了一个主键 "id"。另外，还创建了一个名为 "name" 的索引，用于查询数据。
创建存储对象后，就可以添加数据了：
request.onsuccess = function(e){
var db = request.result;
var transaction = db.transaction(['mystore'], 'readwrite');
var store = transaction.objectStore('mystore');
var requestAdd = store.add({id:1, name:'apple'});
};这里使用了事务（transaction）来保证数据的一致性。添加数据时使用的是 add 方法，也可以使用 put 方法来更新数据。删除数据也很简单：
var requestDelete = store.delete(1);
这里的 1 是要删除数据的主键值。
查询数据的方式也很灵活，可以使用主键查询或者使用索引查询：
var requestGet = store.get(1);
var requestIndex = store.index('name').get('apple');这里 get 方法是根据主键查询数据，index 方法是根据索引查询数据。
以上就是使用 IndexDB 进行本地存储的基本方法。需要注意的是，IndexDB 所有的操作都是异步的，因此需要使用回调函数来接收结果。
总结
本文介绍了 PWA 的本地存储方式，包括 LocalStorage 和 IndexDB 两种方案。LocalStorage 简单易用，适合存储小量数据；而 IndexDB 功能更强大，适合存储大量数据和进行复杂的查询操作。需要根据具体情况选择合适的方案。
示例代码：
-- -------------------- ---- -------
-- ------------
--------------------------- ---------
--- ----- - ----------------------------
-------------------------------
-- -------
--- ------- - ---------------------- ---
----------------------- - ------------
--- -- - ---------------
--- ----- - ------------------------------- ----------------
------------------------- ------- ----------------
--
----------------- - ------------
--- -- - ---------------
--- ----------- - --------------------------- -------------
--- ----- - -----------------------------------
--- ---------- - ---------------- ---------------
--- ---------- - -------------
--- ------------ - ---------------------------------
--- ------------- - ----------------
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66565b34d3423812e4b0b996