在前端开发中，我们经常需要在客户端存储一些数据，以便下次访问时可以快速获取。ECMAScript 2021 中提供了两种存储数据的方式：localStorage 和 sessionStorage。本文将详细介绍这两种方式的使用方法和注意事项。
localStorage
localStorage 是一种持久化存储数据的方式，数据存储在客户端的浏览器中，并且在浏览器关闭后仍然可以保留。localStorage 的 API 很简单，只有以下几个方法：
localStorage.setItem(key, value)：存储数据，key 和 value 都是字符串类型。localStorage.getItem(key)：获取数据，返回 key 对应的值。localStorage.removeItem(key)：删除数据，删除 key 对应的数据。localStorage.clear()：清空所有数据。
下面是一个示例代码，演示如何使用 localStorage 存储数据：
-- -------------------- ---- ------- -- ---- ---------------------------- ------- --------------------------- ------ -- ---- ----- ---- - ----------------------------- ----- --- - ---------------------------- ------------------ -- --- ----------------- -- -- -- ---- -------------------------------- -- ------ ---------------------
需要注意的是，localStorage 存储的数据大小有限制，不同浏览器的限制大小也不同。一般来说，可以存储几 MB 的数据，但是具体大小还需要根据浏览器进行测试。
sessionStorage
sessionStorage 与 localStorage 类似，也是一种客户端存储数据的方式。不同的是，sessionStorage 存储的数据在浏览器关闭后会被删除，因此数据是临时的。sessionStorage 的 API 与 localStorage 的 API 相同，只是存储的数据有时效性。
下面是一个示例代码，演示如何使用 sessionStorage 存储数据：
-- -------------------- ---- ------- -- ---- ------------------------------ ------- ----------------------------- ------ -- ---- ----- ---- - ------------------------------- ----- --- - ------------------------------ ------------------ -- --- ----------------- -- -- -- ---- ---------------------------------- -- ------ -----------------------
需要注意的是，sessionStorage 存储的数据大小也有限制，不同浏览器的限制大小也不同。一般来说，可以存储几 MB 的数据，但是具体大小还需要根据浏览器进行测试。
总结
localStorage 和 sessionStorage 都是 ECMAScript 2021 中的数据存储方式，它们可以在客户端存储数据，并且可以方便地获取和删除数据。localStorage 存储的数据是持久化的，而 sessionStorage 存储的数据是临时的。需要注意的是，它们存储的数据大小有限制，不同浏览器的限制大小也不同。
在实际开发中，可以根据需求选择使用 localStorage 或 sessionStorage 存储数据。如果需要长期保存数据，可以选择 localStorage；如果需要临时保存数据，可以选择 sessionStorage。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6607d4e1d10417a2226712c9