关注【索引目录】服务号，更多精彩内容等你来探索！
当我们谈论数据存储这样的话题时，我们立即会想到这三个概念。但问题是，我们经常无意识地使用它们。
我们习惯将令牌存储在 sessionStorage 中，但并非所有人都能回答出确切的原因。其他概念也遵循同样的情况。所有这些问题早已由我们使用的模块决定，这很令人难过，因为即使你完全不懂网站，你也需要了解这一点。
在本文中，我尝试为您准备终极指南，以便您不会对其用途和用途产生任何误解。
好吧，让我们开始吧！
️ 本地存储
在我们开始讨论 LocalStorage 之前，值得先简单介绍一下什么是存储。
简而言之，存储是浏览器存储信息的专用位置。在 JavaScript 中，此类存储表示为对象，可以通过window对象保留名称的属性或专用变量访问。
现在，我们回过头来看看。我们可以通过 LocalStoragelocalStorage对象访问它。现在，重要的是，即使我们关闭标签页或浏览器本身，数据也会存储在这个对象中。这适用于处理大量数据。
// Save a value
localStorage.setItem("theme", "dark");
// Retrieve a value
const theme = localStorage.getItem("theme");
console.log(theme); // "dark"
// Remove a value
localStorage.removeItem("theme");
// Clear all storage
localStorage.clear();它是存储长期数据（例如设置、缓存数据等）的好地方。
会话存储
SessionStorage 与 LocalStorage 类似；区别在于localStorage，SessionStorage 仅按源进行分区，sessionStorage而 LocalStorage 则同时按源和浏览器标签页（顶级浏览上下文）进行分区。SessionStorage 中的数据sessionStorage仅在页面会话期间保留。适用于大量数据。
也就是说，如果您关闭浏览器中的某个标签，则此存储中的所有数据都将被清除。
// Save a value
sessionStorage.setItem("authToken", "123456");
// Retrieve a value
const token = sessionStorage.getItem("authToken");
console.log(token); // "123456"
const templateFn = hmpl.compile(
`<div>
{{#request src="/api/my-component.html"}}
{{#indicator trigger="pending"}}
<p>Loading...</p>
{{/indicator}}
{{/request}}
</div>`
);
const content = templateFn(() => ({
body: JSON.stringify({ token })
})).response;
// Remove a value
sessionStorage.removeItem("authToken");
// Clear all storage
sessionStorage.clear();适用于临时令牌，以及您在网站访问期间所需的数据，即会话数据。
饼干
如今，最流行的存储方式，也是现代 Web 应用用户最常谈论的，或许就是 Cookie。Cookie 的宣传语层出不穷，但很多人却忽略了一点：“它们有什么用？” 事实上，Cookie 是一种小型存储（大小以日后为准），用于存储临时数据（即一段时间后会被删除的数据）。它适用于少量数据。
// Set a cookie
document.cookie = "username=John; path=/; max-age=3600"; // expires in 1 hour
// Read cookies
console.log(document.cookie); // "username=John"
// Update a cookie
document.cookie = "username=Mike; path=/; max-age=3600";
// Delete a cookie
document.cookie = "username=; path=/; max-age=0";这些数据通常用于网站上的各种跟踪。例如，有多少人点击了，用户如何移动光标等等。此外，在进行身份验证时，也经常会用到这些数据。
结论
在本文中，我们研究了 LocalStorage、SessionStorage 和 Cookies，它们在浏览器中执行不同的数据存储任务。选择正确的存储方法取决于数据的生命周期、容量限制以及从服务器访问数据的需求。正确的选择将帮助您提升性能、安全性和用户体验。
关注【索引目录】服务号，更多精彩内容等你来探索！