当前位置：首页 > backend >正文

【Vue】浏览器缓存 sessionStorage、localStorage、Cookie

backend 2025/7/14 7:59:34

嘿，各位 Vue 开发者们！今天咱们来好好聊聊浏览器里的三种缓存方式：sessionStorage、localStorage 和 Cookie。在实际开发中，合理运用这些缓存能让我们的应用性能大幅提升，同时避免一些不必要的问题。下面就跟着我的笔记，一起来深入了解它们吧！

一、概述

在 Web 开发里，缓存是个非常重要的概念。它能帮助我们减少对服务器的请求，提高页面的加载速度，增强用户体验。而 sessionStorage、localStorage 和 Cookie 就是浏览器为我们提供的几种本地缓存机制。

1. sessionStorage

sessionStorage 是 HTML5 新增的一个会话存储对象，它用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据就会被清除。

2. localStorage

localStorage 同样是 HTML5 新增的一个会话存储对象，它用于长期保存数据，除非手动删除，否则数据不会过期。

3. Cookie

Cookie 是在 Web 服务器和浏览器之间传递的小段数据，它会在客户端和服务器之间来回传递，可设置过期时间。

二、使用方法

1. sessionStorage

存储数据

// 在 Vue 组件中使用
export default {methods: {setSessionData() {sessionStorage.setItem('username', 'John');}}
}

获取数据

export default {methods: {getSessionData() {const username = sessionStorage.getItem('username');console.log(username);}}
}

删除数据

export default {methods: {removeSessionData() {sessionStorage.removeItem('username');}}
}

清空所有数据

export default {methods: {clearSessionData() {sessionStorage.clear();}}
}

2. localStorage

存储数据

export default {methods: {setLocalData() {localStorage.setItem('email', 'john@example.com');}}
}

获取数据

export default {methods: {getLocalData() {const email = localStorage.getItem('email');console.log(email);}}
}

删除数据

export default {methods: {removeLocalData() {localStorage.removeItem('email');}}
}

清空所有数据

export default {methods: {clearLocalData() {localStorage.clear();}}
}

3. Cookie

存储数据

function setCookie(name, value, days) {let expires = "";if (days) {const date = new Date();date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));expires = "; expires=" + date.toUTCString();}document.cookie = name + "=" + (value || "") + expires + "; path=/";
}export default {methods: {setCookieData() {setCookie('user_id', '123', 7);}}
}

获取数据

function getCookie(name) {const nameEQ = name + "=";const ca = document.cookie.split(';');for (let i = 0; i < ca.length; i++) {let c = ca[i];while (c.charAt(0) === ' ') c = c.substring(1, c.length);if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);}return null;
}export default {methods: {getCookieData() {const userId = getCookie('user_id');console.log(userId);}}
}

删除数据

function deleteCookie(name) {document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}export default {methods: {deleteCookieData() {deleteCookie('user_id');}}
}

三、区别与适用场景

1. 区别

特性	sessionStorage	localStorage	Cookie
数据有效期	窗口或标签页关闭即清除	除非手动删除，否则不过期	可设置过期时间
数据大小	一般为 5MB	一般为 5MB	一般为 4KB
数据传递	不参与服务器通信	不参与服务器通信	会在客户端和服务器之间来回传递
作用域	仅在同一窗口（或标签页）有效	在同一浏览器内共享	在同一域名下有效

2. 适用场景

sessionStorage：适用于临时保存同一窗口（或标签页）的数据，如表单数据、临时状态等。
localStorage：适用于长期保存数据，如用户偏好设置、缓存数据等。
Cookie：适用于需要在客户端和服务器之间传递数据的场景，如用户登录状态、用户身份验证等。

四、避坑指南

1. 数据类型问题

sessionStorage 和 localStorage 只能存储字符串类型的数据。如果要存储对象或数组，需要先使用 JSON.stringify() 进行序列化，获取时再使用 JSON.parse() 进行反序列化。

// 存储对象
const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));// 获取对象
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser);

2. Cookie 安全问题

由于 Cookie 会在客户端和服务器之间来回传递，所以要注意防止 Cookie 被篡改或窃取。可以通过设置 HttpOnly 和 Secure 属性来提高 Cookie 的安全性。

// 设置 HttpOnly 和 Secure 属性的 Cookie
document.cookie = 'user_id=123; path=/; HttpOnly; Secure';

3. 兼容性问题

虽然 sessionStorage 和 localStorage 是 HTML5 新增的特性，但大多数现代浏览器都支持。在使用时，最好先检查浏览器是否支持这些特性。

if (typeof(Storage) !== "undefined") {// 支持 localStorage 和 sessionStoragelocalStorage.setItem('test', 'test value');
} else {// 不支持console.log('Your browser does not support Web Storage.');
}