会话存储的总结：

cookie、localStorage、sessionStorage  都是用于客户端存储数据的机制

在实现项目的时候可以把单独key的获取编辑和删除方法封装在一个文件里面导出使用

1.cookie使用方法 ：

• 存储限制：每个 Cookie 的大小限制通常为 4KB。
• 过期时间：Cookie 可以设置过期时间，也可以是会话 Cookie（浏览器关闭后自动删除）。
• 作用范围：可以设置 Domain 和 Path 来限制 Cookie 的作用范围，跨子域和路径使用。
• 发送给服务器：每次请求都会自动发送到服务器，可能增加网络开销。
• 安全性：可以设置 Secure 和 HttpOnly 标志来提高安全性，防止通过 JavaScript 访问 Cookie 或在 HTTPS 下传输。

获取和设置cookie（使用js-cookie较为简单）：

• 首先安装js-cookie库 —— npm install js-cookie
• 引入js-cookie： import Cookie  from 'js-cookie'
• 设置cookie：

  // 设置基本的 Cookie
  Cookies.set('name', 'value');
  
  // 设置带有过期时间和路径的 Cookie ，expires可以是数字表示天数，或应该date对象
  Cookies.set('name', 'value', { expires: 7, path: '/' });

• 获取Cookie：

  const value = Cookies.get('name');

• 删除cookie：

  // 删除 Cookie
  Cookies.remove('name');
  
  // 删除指定路径下的 Cookie
  Cookies.remove('name', { path: '/' });

2.sessionStorage使用方法

• 存储限制：与 localStorage 相似，每个域名下的存储空间通常为 5MB 到 10MB。
• 过期时间：数据在浏览器窗口或标签页关闭时自动删除。
• 作用范围：仅在同一浏览器窗口或标签页下可访问，不会自动发送到服务器。
• 安全性：与 localStorage 相似，存储的数据可以通过 JavaScript 访问，需要手动处理安全问题。

获取和设置sessionStorage：

• 设置数据：

  sessionStorage.setItem('key', 'value');

• 获取数据：

  const value = sessionStorage.getItem('key');

• 删除数据：

  sessionStorage.removeItem('key');

• 清空所有数据：

  sessionStorage.clear();

3.localStorage使用方法

• 存储限制：每个域名下的存储空间通常为 5MB 到 10MB。
• 过期时间：数据不会过期，除非主动删除。
• 作用范围：仅在同一浏览器和同一域名下可访问，不会自动发送到服务器。
• 安全性：没有直接的安全标志，存储的数据可以通过 JavaScript 访问，需要手动处理安全问题。

设置和获取localStorage

• 设置数据：

  localStorage.setItem('key', 'value');

• 获取数据：

  const value = localStorage.getItem('key');

• 删除数据：

  localStorage.removeItem('key');

注意：在本地存储的时候需要注意存对象和数组等数据结构的时候需要转换成一种可序列化的格式使用JSON.stringify()将数组或对象转换成字符串，在读取数据的时候可以使用JSON.parse()将字符串换回数组或对象