【前端】理解与使用sessionStorage、localStorage与cookie

深入理解与高效使用 sessionStorage、localStorage 与 cookie

背景

在构建一个多页面的 Vue web 应用时，我面临了一个关键问题：如何有效地管理用户的登录状态。为了减少对服务器的不必要请求，我尝试了全局状态注入的方法，但这种方法在页面刷新时会导致登录状态丢失，因为异步请求的登录数据还未完全加载，页面就已经进行了登录状态的校验。

查找资料，发现前端得sessionStorage、localStorage 和 cookie技术能够在客户端持久化存储数据，从而在不同页面间共享数据，应该可以解决我的问题。
（这个东西好像很基础，但是作为一个写后端得小白，不知道这些也很正常对吧QAQ）

简单记录一下

Cookie

特点

1. 有限的存储空间：Cookie 的大小通常限制在 4KB 左右，这意味着它不适合存储大量数据。
2. 可设置的过期时间：Cookie 可以设置一个特定的过期时间，如果在创建时未指定过期时间，Cookie 通常在浏览器关闭时被删除。
3. 自动随请求发送：Cookie 会随着 HTTP 请求自动发送到服务器，这可能会增加网络请求的负载，但同时也方便了服务器识别用户。

用途

1. 用户身份验证：服务器可以通过设置包含用户身份信息的 Cookie，在用户下次访问时识别用户，从而保持登录状态。
2. 个性化用户设置：存储用户偏好设置，如语言选择、主题风格等，以便在用户再次访问时提供个性化体验。

JavaScript 使用方法

• 设置 Cookie：

  function saveCookie(cookieName, cookieValue, cookieDays) {
    var d = new Date();
    d.setTime(d.getTime() + (cookieDays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/";
  }
  

• 读取 Cookie：

  function getCookie(cookieName) {
    var name = cookieName + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }
  

localStorage

特点

1. 较大的存储容量：localStorage 提供了大约 5MB 的存储空间，适合存储更多数据。
2. 持久性存储：存储在 localStorage 中的数据没有过期时间，会永久保存直到被明确清除。
3. 仅在客户端存储：数据只存储在客户端，不会随请求发送到服务器，减少了网络开销。

用途

1. 离线应用支持：在没有网络连接的情况下，可以利用 localStorage 存储的数据来提供基本的应用程序功能。
2. 缓存不常变化的数据：可以缓存不经常变化的数据，如用户信息、设置选项等，减少服务器请求和加快页面加载速度。

JavaScript 使用方法

• 存储数据：

  localStorage.setItem("username", "JohnDoe");
  

• 读取数据：

  let username = localStorage.getItem("username");
  

• 删除数据：

  localStorage.removeItem("username");
  

sessionStorage

特点

1. 会话存储容量：与 localStorage 类似，sessionStorage 也提供了大约 5MB 的存储空间。
2. 会话持久性：sessionStorage 存储的数据只在当前会话中有效，关闭浏览器标签或窗口后数据会被清除。

用途

1. 表单数据暂存：在用户填写表单过程中，可以使用 sessionStorage 暂存数据，以防页面刷新导致数据丢失。
2. 页面间临时数据传递：在单次会话中，可以使用 sessionStorage 在不同页面间传递临时数据，如用户在表单中输入的数据。

JavaScript 使用方法

• 存储数据：

  sessionStorage.setItem("sessionKey", "sessionValue");
  

• 读取数据：

  let sessionValue = sessionStorage.getItem("sessionKey");
  

• 删除数据：

  sessionStorage.removeItem("sessionKey");
  

---

024/08/27