一文了解 Cookie、localStorage、sessionStorage的区别与实战案例

一文了解 Cookie、localStorage、sessionStorage的区别与实战案例

在前端开发中，浏览器存储是不可或缺的核心能力，无论是保存用户登录状态、记住主题偏好，还是暂存表单中间数据，都离不开它。而Cookie、localStorage、sessionStorage作为最常用的三种浏览器存储方案，很多开发者在实际项目中容易混淆它们的使用场景。

本文将从核心特性出发，清晰对比三者的区别，再结合Vue框架给出可直接复用的实战代码案例，帮你彻底搞懂何时用哪种存储方案。

一、核心区别对比（一张表看懂）

先通过一张对比表，快速掌握三者的核心差异知识点：

二、Vue实战案例（可直接复用）

在Vue项目中，不同存储方案的使用方式略有差异，下面结合实际业务场景，给出完整的代码示例。

1. Cookie：适合存储登录状态等需要和服务器交互的数据

Cookie原生API使用起来不够便捷，推荐使用js-cookie库（轻量、易用），专门用于管理Cookie。

步骤1：安装依赖

npm install js-cookie --save

步骤2：实战代码（登录状态管理）

场景：用户登录后保存Token，退出登录时删除Token，页面刷新后保留登录状态。

<template> <div class="login-container"> <h2>用户登录</h2> <input type="text" v-model="username" placeholder="请输入用户名" class="input" > <input type="password" v-model="password" placeholder="请输入密码" class="input" > <button @click="handleLogin" class="btn">登录</button> <button @click="handleLogout" class="btn btn-logout">退出登录</button> <p v-if="token" class="login-status">当前登录状态：已登录（Token：{{ token }}）</p> <p v-else class="login-status">当前登录状态：未登录</p> </div> </template> <script> // 引入js-cookie库 import Cookies from 'js-cookie'; export default { name: 'LoginPage', data() { return { username: '', password: '', // 初始化时从Cookie获取Token，无则为空 token: Cookies.get('userToken') || '' }; }, methods: { handleLogin() { // 模拟接口请求登录（实际项目中替换为真实接口） if (this.username && this.password) { const mockToken = 'mock_user_token_123456'; // 接口返回的Token // 设置Cookie：key为userToken，值为mockToken，过期时间1天 Cookies.set('userToken', mockToken, { expires: 1 }); // 更新本地Token状态 this.token = mockToken; alert('登录成功！'); } else { alert('请输入用户名和密码！'); } }, handleLogout() { // 删除Cookie Cookies.remove('userToken'); // 重置状态 this.token = ''; this.username = ''; this.password = ''; alert('退出登录成功！'); } } }; </script>

核心说明

• 设置Cookie时，expires: 1表示1天后过期，也可设置为具体日期（如new Date('2025-12-31')）；
• 删除Cookie时，需确保Cookies.remove()的key与设置时一致；
• 适合存储需要和服务器交互的身份信息，因为Cookie会自动随请求发送。

2. localStorage：适合长期保存用户偏好数据

localStorage原生API已足够简洁，无需额外安装依赖，适合存储长期不失效的本地数据。

实战代码（主题切换功能）

场景：用户切换暗黑/亮色主题后，刷新页面依然保留当前主题设置。

<template> <div class="theme-container" :class="theme"> <h2>主题切换演示</h2> <p>当前主题：{{ theme === 'light' ? '亮色模式' : '暗黑模式' }}</p> <button @click="toggleTheme" class="theme-btn">切换主题</button> </div> </template> <script> export default { name: 'ThemeSwitch', data() { return { // 初始化时从localStorage获取主题，无则默认亮色模式 theme: localStorage.getItem('appTheme') || 'light' }; }, methods: { toggleTheme() { // 切换主题状态 this.theme = this.theme === 'light' ? 'dark' : 'light'; // 保存主题到localStorage（永久有效，除非手动清除） localStorage.setItem('appTheme', this.theme); } } }; </script>

核心说明

• 使用localStorage.setItem(key, value)存储数据，localStorage.getItem(key)获取数据；
• 数据永久保存，即使关闭浏览器再重新打开，依然能获取到；
• 适合存储用户偏好、本地缓存数据等不需要和服务器交互的长期数据。

3. sessionStorage：适合暂存会话级临时数据

sessionStorage的API和localStorage完全一致，但生命周期是会话级，关闭标签页后数据即丢失。

实战代码（多步骤表单暂存）

场景：多步骤表单（如注册表单），用户填写完第一步内容后，切换页面再返回，依然保留已填写的内容（关闭标签页后丢失）。

<template> <div class="form-container"> <h2>多步骤注册表单（步骤1）</h2> <input type="text" v-model="formData.username" placeholder="请输入用户名" class="input" > <input type="tel" v-model="formData.phone" placeholder="请输入手机号" class="input" > <button @click="goToNextStep" class="form-btn">下一步（暂存数据）</button> <p class="tip">提示：关闭当前标签页后，已填写内容将丢失</p> </div> </template> <script> export default { name: 'MultiStepForm', data() { return { // 初始化时从sessionStorage获取暂存的表单数据，无则为空对象 formData: JSON.parse(sessionStorage.getItem('step1Form')) || { username: '', phone: '' } }; }, watch: { // 监听formData变化，实时暂存到sessionStorage formData: { deep: true, // 深度监听对象内部属性变化 handler(newVal) { // sessionStorage只能存储字符串，需将对象转为JSON字符串 sessionStorage.setItem('step1Form', JSON.stringify(newVal)); } } }, methods: { goToNextStep() { if (this.formData.username && this.formData.phone) { // 模拟跳转到下一步表单（实际项目中用路由跳转） alert('已暂存步骤1数据，跳转到步骤2'); // 此处可添加路由跳转代码，如：this.$router.push('/register-step2') } else { alert('请填写完整用户名和手机号！'); } } } }; </script>

核心说明

• API和localStorage一致，但数据仅在当前标签页有效，关闭标签页或打开新标签页均无法获取；
• 存储对象时，需用JSON.stringify()转为字符串，获取时用JSON.parse()转回对象；
• 适合暂存单次会话的临时数据，如多步骤表单、页面临时状态等，无需长期保留的数据。

三、总结：如何选择合适的存储方案？

最后用一张表快速梳理三种方案的Vue使用场景和核心要点，方便实际开发中快速决策：