【前端】理解与使用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() +