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