在前端开发中，我们经常需要存储一些数据以便后续使用。例如，当用户在购物网站上添加商品到购物车时，我们希望能够将这些商品信息保存下来，以便用户在离开该页面之后再次访问网站时能够看到他们的购物车内容。
然而，前端存储有其自身的限制。本文将介绍不同类型的存储方案及其限制，并提供相应的示例代码。
Cookie
Cookie 是最早的前端存储方案之一，它可以存储少量文本数据，并在客户端与服务器之间进行传输。Cookie 最初是为了解决 HTTP 无状态协议的问题而设计的，因为它可以在多个请求之间传递数据。
Cookie 的大小限制通常为 4KB 左右，但实际上每个浏览器都有自己的限制。如果您要存储大量数据，则可能需要拆分成多个 Cookie。
以下是通过 JavaScript 设置和获取 Cookie 的示例代码：
-- -------------------- ---- -------
-- -- ------
--------------- - -------------- ---- ------------ -- --- ---- -------- ---- --------
-- -- ------
----- ------- - ------------------------ ---
--- ---- - - -- - - --------------- ---- -
----- ------ - -----------
-- -------------------------------- -
----- -------- - ------------------------------------ ---------------
----------------------
-
-localStorage 和 sessionStorage
localStorage 和 sessionStorage 是现代浏览器中的两种前端存储方案，它们都可以存储大量数据，并且可以在客户端本地进行访问。它们的区别在于数据的生命周期不同：localStorage 中存储的数据将一直存在，直到用户手动删除；而 sessionStorage 中存储的数据仅在当前会话期间存在，当用户关闭标签页或浏览器时，数据将被清除。
这些存储方案的大小限制因浏览器而异，但通常为 5-10MB 左右。如果您要存储更大的数据，则可能需要使用其他方案。
以下是通过 JavaScript 设置和获取 localStorage 的示例代码：
// 设置 localStorage
localStorage.setItem("username", "John Doe");
// 获取 localStorage
const username = localStorage.getItem("username");
console.log(username);IndexedDB
IndexedDB 是另一种现代浏览器支持的前端存储方案，它可以存储大量结构化数据，并提供高级的查询功能。与 localStorage 和 sessionStorage 不同，IndexedDB 可以存储非文本类型的数据。
IndexedDB 的大小限制也因浏览器而异，但通常比 localStorage 和 sessionStorage 更大。例如，在 Chrome 中，IndexedDB 的默认限制为 50MB，但用户可以在浏览器设置中更改该限制。
以下是通过 JavaScript 添加和查询 IndexedDB 的示例代码：
-- -------------------- ---- -------
-- -----
----- ------- - ---------------------------- ---
-- ----------
----------------- - --------------- -
----- -- - --------------------
----- ----------- - ----------------------------- --------------------------------------
-- ----
----------------- --- -- ----- ----- ---- ---
-- ----
----- ------- - -------------------
----------------- - --------------- -
---------------------------------
--
--总结
前端存储方案有其自身的限制，但可以根据需要选择适当的存储方案。在选择方案时，需要考虑数据大小、生命周期和类型等因素。使用适当的存储方案可以提高应用程序的性能和用户体验。
本文介绍了 Cookie、localStorage、sessionStorage 和 IndexedDB
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24055