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

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

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

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

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

特性	Cookie	localStorage	sessionStorage
存储容量	约 4KB（容量较小，适合存储少量数据）	约 5MB（容量较大，可存储更多本地数据）	约 5MB（容量较大）
生命周期	可手动设置过期时间，默认随会话结束（关闭浏览器）清除	永久存储，除非手动清除（清除浏览器缓存、代码删除）	会话级存储，关闭当前标签页即清除（同一浏览器不同标签页不共享）
作用域	同源（协议、域名、端口一致）下共享，且自动随每次HTTP请求发送到服务器	同源下共享，仅通过JS访问，不主动发送给服务器	同源且同标签页下共享，不同标签页即使同源也不共享
是否自动发送给服务器	是（每次请求都会携带，可能增加请求体积）	否	否
访问方式	JS和服务器均可访问	仅JS可访问	仅JS可访问
典型用途	会话管理、身份验证（如登录Token）、记住密码	长期保存用户偏好（如暗黑模式）、本地缓存不敏感数据	暂存单次会话数据（如多步骤表单中间值、页面临时状态）

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

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

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

步骤1：安装依赖

css 复制代码

npm install js-cookie --save

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

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

xml 复制代码

<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已足够简洁，无需额外安装依赖，适合存储长期不失效的本地数据。

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

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

xml 复制代码

<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完全一致，但生命周期是会话级，关闭标签页后数据即丢失。

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

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

xml 复制代码

<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使用场景和核心要点，方便实际开发中快速决策：

存储方式	Vue中典型使用场景	核心要点
Cookie	登录状态管理、身份验证（Token）、记住密码	用js-cookie库简化操作，可设置过期时间，自动随请求发送
localStorage	用户主题偏好、本地缓存数据、长期保存的不敏感信息	原生API简洁，永久存储，需手动清除，不发送给服务器
sessionStorage	多步骤表单暂存、页面临时状态、单次会话数据	API同localStorage，会话级生命周期，关闭标签页即清除

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