vue浏览器缓存sessionStorage、localStorage、Cookie

在 Vue.js 项目中，管理浏览器缓存是常见的需求，主要可以通过 sessionStorage、localStorage 和 Cookie 来实现。下面分别介绍这三种方式及其用法。

1. sessionStorage

sessionStorage 用于存储在会话（即浏览器窗口关闭前）期间的数据。每次打开一个新的窗口或标签页都会有一个新的会话。

使用方法

• 存储数据

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

• 获取数据

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

• 删除数据

  sessionStorage.removeItem('key');
  

• 清除所有数据

sessionStorage.clear();

在 Vue 组件中使用

2. localStorage

localStorage 用于长期存储数据，即使浏览器关闭后数据仍然存在。除非明确删除，否则数据会一直保存在浏览器中。

使用方法

存储数据
localStorage.setItem('key', 'value');
获取数据
const value = localStorage.getItem('key');
删除
localStorage.removeItem('key');
清除所有
localStorage.clear();

​

在 Vue 组件中使用

3. Cookie

Cookie 用于在客户端存储少量数据，并可以在请求时发送到服务器。适用于存储需要与服务器交互的数据。

使用方法

存储数据
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
获取数据
获取 Cookie 需要自行解析字符串，常用封装方法如下：
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 删除数据
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

在 Vue 组件中使用

总结

• sessionStorage：适用于存储会话数据。
• localStorage：适用于存储长期数据。
• Cookie：适用于需要与服务器交互的数据。

选择哪种存储方式取决于具体需求和数据的生命周期。