WebStorage API 是 HTML5 标准之一，提供了一种基于键值对的客户端存储方案，可以用于在浏览器端存储数据。然而，这个 API 并不是所有浏览器都支持，对于一些较老的浏览器，这个 API 并不适用。为了解决这个问题，我们可以使用 webstorage-polyfill 这个 npm 包来实现兼容性处理。
安装
在终端中输入以下命令可以安装 webstorage-polyfill：
npm install webstorage-polyfill
引入
在使用 webstorage-polyfill 的项目中，可以通过以下方式引入：
import 'webstorage-polyfill';
或者
require('webstorage-polyfill');使用
使用 webstorage-polyfill 的方法与原生的 WebStorage API 基本一致，只不过需要注意一些细节。
localStorage
localStorage.setItem('key', 'value');
localStorage.getItem('key') // "value"
localStorage.removeItem('key');
localStorage.clear();sessionStorage
sessionStorage.setItem('key', 'value');
sessionStorage.getItem('key') // "value"
sessionStorage.removeItem('key');
sessionStorage.clear();注意：webstorage-polyfill 中的 sessionStorage 和 localStorage 相比于原生的实现，还有一些区别。在原生 WebStorage API 中，一个页面关闭后，对应的 sessionStorage 数据会被清空。但是在 webstorage-polyfill 中，页面关闭后数据不会被清空，需要手动 removeItem 或者 clear。
cookie
webstorage-polyfill 还提供了一些 cookie 相关的 API。
// set cookie document.cookie = 'username=John Doe'; // get cookie console.log(document.cookie); // "username=John%20Doe; domain=; path=/"
并发问题
webstorage-polyfill 中封装了 locker.js，可以解决并发问题。如果想避免在多个页面同时进行 localStorage 操作时，数据被覆盖等问题，可以使用 locker.js。
import { Locker } from 'webstorage-polyfill';
const locker = new Locker();
locker.set('key', 'value');
locker.error((err) => {
// handle error
});完整的示例代码：
-- -------------------- ---- -------
------ - ------ - ---- ----------------------
----- ------ - --- ---------
----- ----------- - ---------- -- -
---------------------- -- -- -
-----------
-------------------------
---
--
-------------- -- -
----------------- ---------
---
----------------- ----- ------ -- -
-- ----- -
-----------------
- ---- -
-------------------
-
---总结
WebStorage API 是一个便捷的客户端存储方案，可惜并不是所有浏览器都支持。通过使用 webstorage-polyfill，我们可以很方便地实现对旧浏览器的兼容性处理。在使用时，需要注意一些细节，比如 sessionStorage 的区别，Locker 解决并发问题等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde64