目录
一、基本用法（原生 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。