LocalStorage、SessionStorage 和 Cookies：完整指南🗄️

当我们谈到数据存储这样的话题时，我们首先想到的就是这三个概念。但问题是，我们经常是在无意识中使用这些概念。

我们习惯于将令牌存储在 sessionStorage 中，但并非每个人都能确切地解释原因。其他概念也遵循同样的模式。所有这些问题早已由我们使用的模块决定，这令人遗憾，因为即使您完全不懂网站，也需要了解这些内容。

在本文中，我试图为您准备一份终极指南，以便您不会对所用物品及其用途产生任何误解。

好，我们开始吧！

🗄️本地存储

在开始讲解本地存储之前，我们不妨先简单了解一下什么是存储。

简而言之，存储是浏览器专门用来存储信息的地方。在 JavaScript 中，这种存储以对象的形式呈现，可以通过window对象的属性（使用保留名称）或专用变量来访问。

现在，我们回到正题。这里有一个本地存储（LocalStorage），我们通过localStorage对象来访问它。重要的是，即使我们关闭标签页或浏览器，数据也会存储在这个对象中。这非常适合存储大量数据。

// 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 类似；区别在于localStorageLocalStorage 仅按来源分区，而sessionStorageSessionStorage 同时按来源和浏览器标签页（顶级浏览上下文）分区。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();

适用于临时令牌，以及您在访问网站期间所需的数据，即会话数据。

🍪 饼干

如今，最热门的存储方式莫过于 cookie 了，几乎所有现代 Web 应用用户都在谈论它。关于 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) 和 Cookie，它们在浏览器中用于存储数据，但功能各不相同。选择合适的存储方式取决于数据的生命周期、容量限制以及是否需要从服务器访问数据。正确的选择有助于提升性能、安全性和用户体验。

非常感谢您阅读这篇文章❤️！

PS：也别忘了帮我给HMPL点赞哦！

🌱 星级 HMPL