目录

一、基本用法（原生 API）

1. 存储数据

2. 获取数据

3. 删除数据

二、Vue3 中封装成工具函数（推荐）

三、以上工具函数在 Vue3 组件中使用

1. 在选项式 API 中使用

2. 在组合式 API（setup 语法糖）中使用

四、将存储结合 Pinia 实现响应式存储（高级用法）

1. 在组件中使用

五、注意事项

一、基本用法（原生 API）

本地存储和会话存储的核心 API 完全一致，区别在于：

• localStorage：数据持久化存储，关闭浏览器后不会丢失（除非手动清除）
• sessionStorage：数据仅在当前会话有效，关闭标签页 / 浏览器后自动清除

1. 存储数据

// 存储到本地存储
localStorage.setItem('userName', '张三'); // 存储字符串
localStorage.setItem('userInfo', JSON.stringify({ id: 1, name: '张三' })); // 存储对象（需序列化）// 存储到会话存储
sessionStorage.setItem('token', 'abc123');
sessionStorage.setItem('cart', JSON.stringify([{ id: 1, name: '商品' }]));

2. 获取数据

// 从本地存储获取
const userName = localStorage.getItem('userName'); // 获取字符串
const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}'); // 获取对象（需反序列化）// 从会话存储获取
const token = sessionStorage.getItem('token');
const cart = JSON.parse(sessionStorage.getItem('cart') || '[]');

3. 删除数据

// 删除单个数据
localStorage.removeItem('userName');
sessionStorage.removeItem('token');// 清空所有数据
localStorage.clear();    //清空本地存储
sessionStorage.clear();    //清空会话存储

二、Vue3 中封装成工具函数（推荐）

为了更方便使用，可以将以上这些方法封装成工具函数，放在 utils/storage.js 中，封装如下：

// 本地存储工具函数
export const LocalStorage = {// 设置数据set(key, value) {if (typeof value === 'object') {value = JSON.stringify(value);}localStorage.setItem(key, value);},// 获取数据get(key) {const value = localStorage.getItem(key);if (!value) return null;// 尝试解析为对象try {return JSON.parse(value);} catch (e) {return value; // 解析失败则返回原始字符串}},// 删除数据remove(key) {localStorage.removeItem(key);},// 清空所有数据clear() {localStorage.clear();}
};// 会话存储工具函数
export const SessionStorage = {set(key, value) {if (typeof value === 'object') {value = JSON.stringify(value);}sessionStorage.setItem(key, value);},get(key) {const value = sessionStorage.getItem(key);if (!value) return null;try {return JSON.parse(value);} catch (e) {return value;}},remove(key) {sessionStorage.removeItem(key);},clear() {sessionStorage.clear();}
};

三、以上工具函数在 Vue3 组件中使用

1. 在选项式 API 中使用

<template><div><p>用户名：{{ userName }}</p><button @click="saveUser">保存用户信息</button></div>
</template><script>
import { LocalStorage } from '@/utils/storage';export default {data() {return {userName: ''};},mounted() {// 组件挂载时获取本地存储的数据this.userName = LocalStorage.get('userName') || '未登录';},methods: {saveUser() {// 保存数据到本地存储LocalStorage.set('userName', '张三');LocalStorage.set('userInfo', { id: 1, age: 20 });this.userName = '张三';}}
};
</script>

2. 在组合式 API（setup 语法糖）中使用

<template><div><p>Token：{{ token }}</p><button @click="saveToken">保存Token</button></div>
</template><script setup>
import { ref, onMounted } from 'vue';
import { SessionStorage } from '@/utils/storage';// 响应式变量
const token = ref('');// 组件挂载时获取会话存储的数据
onMounted(() => {token.value = SessionStorage.get('token') || '无';
});// 保存数据到会话存储
const saveToken = () => {SessionStorage.set('token', 'abc123456');token.value = 'abc123456';
};
</script>

四、将存储结合 Pinia 实现响应式存储（高级用法）

如果需要让存储的数据在组件中保持响应式（数据变化时自动更新视图），可以结合 Pinia 状态管理，如下：

import { defineStore } from 'pinia';
import { LocalStorage } from '@/utils/storage';export const useStorageStore = defineStore('storage', {state: () => ({// 从本地存储初始化数据（响应式）userInfo: LocalStorage.get('userInfo') || {},theme: LocalStorage.get('theme') || 'light'}),actions: {// 更新用户信息并同步到本地存储setUserInfo(info) {this.userInfo = info;LocalStorage.set('userInfo', info); // 同步到本地存储},// 更新主题并同步到本地存储setTheme(theme) {this.theme = theme;LocalStorage.set('theme', theme);}}
});

1. 在组件中使用

<template><div><p>用户名称：{{ storageStore.userInfo.name }}</p><button @click="updateUser">更新用户信息</button></div>
</template><script setup>
import { useStorageStore } from '@/stores/storage';const storageStore = useStorageStore();const updateUser = () => {storageStore.setUserInfo({ id: 1, name: '李四', age: 25 });
};
</script>

五、注意事项

1. 存储容量限制：localStorage 和 sessionStorage 通常有 5MB 左右的容量限制，不适合存储大量数据
2. 数据类型限制：只能存储字符串，对象 / 数组需要通过 JSON.stringify() 序列化
3. 安全性：存储在本地的信息容易被篡改，敏感数据（如密码）不应直接存储
4. 跨域限制：不同域名之间不能共享 localStorage/sessionStorage 数据
5. 响应式问题：直接修改 localStorage 不会触发 Vue 组件更新，需手动刷新或结合 Pinia 实现响应式

根据需求选择合适的存储方式：需要持久化的数据用 localStorage，临时会话数据用 sessionStorage。