一、核心概念与特性对比
1.1 生命周期与作用域
| 特性 |
LocalStorage |
SessionStorage |
对比说明 |
| 生命周期 |
永久存储（浏览器关闭后仍存在） |
会话级存储（标签页关闭即清除） |
LocalStorage 跨会话有效 |
| 数据共享范围 |
同源所有窗口/标签页共享 |
仅当前标签页有效 |
不同标签页无法共享数据 |
| 典型存储容量 |
5-10MB（浏览器差异） |
5-10MB（与LocalStorage相同） |
均适合中小型数据存储 |
| 数据可见性 |
可通过浏览器开发者工具查看 |
同左 |
敏感数据需加密处理 |
1.2 数据类型限制
- 存储格式：仅支持字符串类型
- 复杂数据处理 ：需通过
JSON.stringify()/JSON.parse() 转换
javascript
复制代码
// 存储对象示例
localStorage.setItem('user', JSON.stringify({ name: '张三', age: 30 }));
const user = JSON.parse(localStorage.getItem('user'));
二、基础操作指南
2.1 核心 API 对比
| 方法 |
LocalStorage |
SessionStorage |
适用场景 |
setItem(key, value) |
永久存储键值对 |
当前会话存储 |
需长期保存的用户偏好设置 |
getItem(key) |
读取永久数据 |
读取会话数据 |
获取主题配置等持久化信息 |
removeItem(key) |
删除永久数据 |
删除会话数据 |
清除用户登录状态 |
clear() |
清空所有永久数据 |
清空当前会话数据 |
重置应用配置 |
2.2 完整操作示例
javascript
复制代码
// 存储数据（自动序列化）
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('cart', JSON.stringify([{id:1,name:'商品A'}]));
// 读取数据（自动反序列化）
const currentTheme = localStorage.getItem('theme') || 'light';
const cartItems = JSON.parse(sessionStorage.getItem('cart')) || [];
// 删除数据
localStorage.removeItem('theme');
sessionStorage.removeItem('cart');
// 清空存储
localStorage.clear();
sessionStorage.clear();
三、进阶应用场景
3.1 表单状态保持（跨页面）
TypeScript
复制代码
// 在表单组件中
export default {
data() {
return {
formData: {
username: '',
password: ''
}
}
},
mounted() {
// 恢复上一次输入
this.formData = JSON.parse(sessionStorage.getItem('formData')) || this.formData;
},
watch: {
formData: {
handler: 'saveDraft',
deep: true
}
},
methods: {
saveDraft() {
sessionStorage.setItem('formData', JSON.stringify(this.formData));
}
}
}
3.2 用户偏好设置管理
TypeScript
复制代码
// 主题切换实现
const THEME_KEY = 'app_theme';
const DEFAULT_THEME = 'light';
// 获取主题
const getCurrentTheme = () => {
return localStorage.getItem(THEME_KEY) || DEFAULT_THEME;
}
// 切换主题
const toggleTheme = () => {
const newTheme = getCurrentTheme() === 'light' ? 'dark' : 'light';
localStorage.setItem(THEME_KEY, newTheme);
document.body.className = newTheme;
}
// 初始化主题
document.addEventListener('DOMContentLoaded', () => {
const savedTheme = getCurrentTheme();
document.body.className = savedTheme;
});
3.3 会话临时数据存储
TypeScript
复制代码
// 购物车临时存储（仅当前标签页有效）
const CART_KEY = 'shopping_cart';
// 添加商品
const addToCart = (product) => {
const cart = JSON.parse(sessionStorage.getItem(CART_KEY)) || [];
cart.push(product);
sessionStorage.setItem(CART_KEY, JSON.stringify(cart));
}
// 清空临时数据（标签页关闭自动清除）
window.addEventListener('beforeunload', () => {
sessionStorage.removeItem(CART_KEY);
});
四、最佳实践与注意事项
4.1 数据安全策略
- 敏感数据加密：
TypeScript
复制代码
import CryptoJS from 'crypto-js';
const SECRET_KEY = 'your-secret-key';
const encrypt = (data) => {
return CryptoJS.AES.encrypt(JSON.stringify(data), SECRET_KEY).toString();
}
const decrypt = (ciphertext) => {
const bytes = CryptoJS.AES.decrypt(ciphertext, SECRET_KEY);
return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}
// 存储加密数据
localStorage.setItem('token', encrypt('user_token_123'));
- 存储容量监控：
TypeScript
复制代码
const checkStorage = (storageType) => {
try {
const testData = 'x'.repeat(1024 * 1024); // 1MB测试数据
let count = 0;
while(true) {
storageType.setItem(`test_${count}`, testData);
count++;
}
} catch(e) {
const usedSpaceMB = (count * 1) / 1024; // 粗略估算已用空间
console.log(`已使用存储空间：${usedSpaceMB.toFixed(2)}MB`);
return usedSpaceMB;
}
}
// 检查LocalStorage剩余空间
checkStorage(localStorage);
4.2 性能优化方案
- 批量操作优化：
TypeScript
复制代码
// 批量写入优化
const batchWrite = (storage, data) => {
const transaction = [];
Object.entries(data).forEach(([key, value]) => {
transaction.push({ type: 'set', key, value });
});
// 模拟批量操作（实际浏览器会自动优化）
transaction.forEach(({ key, value }) => {
storage.setItem(key, value);
});
}
// 使用示例
batchWrite(localStorage, {
theme: 'dark',
language: 'zh-CN',
version: '2.0.1'
});
- 内存缓存策略：
TypeScript
复制代码
// 双缓存机制（内存+LocalStorage）
const createCache = (storageKey) => {
let memoryCache = JSON.parse(localStorage.getItem(storageKey)) || {};
return {
get: (key) => memoryCache[key],
set: (key, value) => {
memoryCache[key] = value;
localStorage.setItem(storageKey, JSON.stringify(memoryCache));
}
}
}
// 使用示例
const userCache = createCache('user_data');
userCache.set('profile', { name: '李四' });
const profile = userCache.get('profile');
五、典型错误与解决方案
5.1 跨域访问问题
TypeScript
复制代码
// 错误示例：不同域名无法访问
// 在 https://a.com 无法访问 https://b.com 的 localStorage
// 解决方案：使用 postMessage 进行安全通信
window.addEventListener('message', (e) => {
if (e.origin === 'https://trusted-domain.com') {
localStorage.setItem('sharedData', e.data);
}
});
5.2 存储空间不足
TypeScript
复制代码
// 错误处理示例
try {
localStorage.setItem('largeData', new Array(10 * 1024 * 1024).fill('x').join(''));
} catch(e) {
if (e instanceof DOMException && e.code === 22) {
console.error('存储空间不足，请清理缓存');
// 自动清理过期数据
localStorage.removeItem('oldData');
}
}
5.3 数据类型错误
TypeScript
复制代码
// 类型校验方案
const safeParse = (data) => {
try {
return JSON.parse(data);
} catch(e) {
console.error('数据解析失败:', e);
return null;
}
}
const userInfo = safeParse(localStorage.getItem('user'));
六、进阶应用案例
6.1 离线应用数据同步
TypeScript
复制代码
// 离线数据缓存策略
const syncOfflineData = async () => {
if (!navigator.onLine) {
// 缓存待提交数据
const pendingData = getPendingData();
localStorage.setItem('offlineQueue', JSON.stringify(pendingData));
} else {
// 联网时同步数据
const offlineData = JSON.parse(localStorage.getItem('offlineQueue') || '[]');
offlineData.forEach(async (item) => {
await fetch('/api/submit', { method: 'POST', body: JSON.stringify(item) });
});
localStorage.removeItem('offlineQueue');
}
}
// 监听网络状态变化
window.addEventListener('online', syncOfflineData);
6.2 多标签页数据同步
TypeScript
复制代码
// 使用 BroadcastChannel 实现跨标签页通信
const channel = new BroadcastChannel('storage_sync');
// 监听数据变化
channel.onmessage = (e) => {
if (e.data.type === 'storage-update') {
localStorage.setItem(e.data.key, e.data.value);
}
}
// 修改数据时广播
const setItemWithBroadcast = (key, value) => {
localStorage.setItem(key, value);
channel.postMessage({ type: 'storage-update', key, value });
}
通过合理运用 LocalStorage 和 SessionStorage，开发者可以显著提升 Web 应用的用户体验和性能表现。建议根据数据特性选择合适的存储方案，并建立完善的存储管理规范。