vue3存储/获取本地或会话存储，封装存储工具，结合pina使用存储
目录
一、基本用法（原生 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>五、注意事项
- 存储容量限制：localStorage 和 sessionStorage 通常有 5MB 左右的容量限制，不适合存储大量数据
- 数据类型限制：只能存储字符串，对象 / 数组需要通过
JSON.stringify()序列化- 安全性：存储在本地的信息容易被篡改，敏感数据（如密码）不应直接存储
- 跨域限制：不同域名之间不能共享 localStorage/sessionStorage 数据
- 响应式问题：直接修改 localStorage 不会触发 Vue 组件更新，需手动刷新或结合 Pinia 实现响应式
根据需求选择合适的存储方式：需要持久化的数据用 localStorage，临时会话数据用 sessionStorage。