Web Storage API 是一组浏览器 API，可以让开发者在浏览器中存储和检索数据。它有两种方式：localStorage 和 sessionStorage。localStorage 可以在浏览器关闭后仍然保存数据，而 sessionStorage 则只能在当前窗口或标签页中保存数据。
在 ES12 中，Web Storage API 也有了新的特性。本文将介绍如何使用 Web Storage API 存储和检索数据，包括 ES12 中新增的特性，同时也会提供示例代码，帮助读者更好地理解和学习。
存储数据
在 Web Storage API 中，我们可以使用 setItem() 方法来存储数据。该方法接收两个参数，第一个参数是要保存的键（key），第二个参数是要保存的值（value）。
-- ----- ------------ ---------------------------- --------
如果我们要存储一个对象，则需要使用 JSON.stringify() 方法将其转换为字符串。
-- ----- ------------ ----- ---- - - ----- ------- ---- -- -- ---------------------------- ----------------------
检索数据
使用 getItem() 方法可以检索存储在 Web Storage 中的数据。
-- - ------------ ----- ----- ---- - ----------------------------- ------------------ -- ----
同样，如果存储的是对象，需要使用 JSON.parse() 方法将字符串转换成对象。
-- - ------------ ----- ----- ------- - ----------------------------- ----- ---- - -------------------- ------------------ -- - ----- ------- ---- -- -
删除数据
可以使用 removeItem() 方法来删除存储在 Web Storage 中的数据。
-- - ------------ ----- --------------------------------
清除所有数据
可以使用 clear() 方法来清除存储在 Web Storage 中的所有数据。
-- -- ------------ ------ ---------------------
新增特性
在 ES12 中，Web Storage API 标准新增了一个方法：storage.writable。
该方法用来判断 Web Storage 是否可以被写入。如果返回 true，则表示可以写入；如果返回 false，则表示不可写入。
-- ------- -- ----------------------- - -- ------ ---------------------------- -------- - ---- - -- ------ ---------------- ------- ------- -
总结
Web Storage API 是一个很有用的浏览器 API，可以让我们方便地在浏览器中存储和检索数据。在 ES12 中，Web Storage API 还新增了一个判断 Web Storage 是否可写入的方法，可以更好地帮助开发者判断当前环境是否支持 Web Storage。
在使用 Web Storage API 时，我们应该遵循以下几个原则：
- 不要存储敏感数据。因为 Web Storage 中的数据可以被恶意网站和浏览器插件窃取。
- 不要存储过多数据。因为存储在 Web Storage 中的数据会占用浏览器的存储空间，可能导致浏览器的性能下降。
- 在存储对象时，需要使用 JSON.stringify() 和 JSON.parse() 方法进行转换。
我们应该谨慎使用 Web Storage API，尽可能地减少存储数据的数量和敏感程度，以保证浏览器的安全性和性能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/665223f2d3423812e467eab9