Web存储指南：彻底掌握localStorage与sessionStorage

一、引言：为什么需要本地存储？

Cookie的局限性
- 大小限制（4KB）、随请求发送的性能损耗
Web存储的优势
- 更大容量（5-10MB）、纯客户端操作、简化API
适用场景概览
- 用户偏好设置、表单数据暂存、离线缓存等

二、核心概念解析

特性	localStorage	sessionStorage
生命周期	永久存储（除非手动删除）	标签页关闭时自动清除
作用域	同源域名全局共享	仅限当前标签页
数据同步	跨标签页同步	标签页间完全隔离
适用场景	长期保存的用户配置	单会话流程的临时数据

三、API实战指南（代码示例）

javascript 复制代码

// 存储数据
localStorage.setItem('theme', 'dark');
sessionStorage.setItem('cartItems', JSON.stringify([1, 2, 3]));

// 读取数据
const theme = localStorage.getItem('theme');
const cart = JSON.parse(sessionStorage.getItem('cartItems')) || [];

// 删除数据
localStorage.removeItem('theme');
sessionStorage.clear(); // 清空当前会话存储

// 监听存储变化（同源页面间通信）
window.addEventListener('storage', (e) => {
  console.log(`键 ${e.key} 从 ${e.oldValue} 变更为 ${e.newValue}`);
});

四、关键注意事项与陷阱

数据类型限制
- 仅支持字符串！存储对象需用 JSON.stringify()
- 陷阱案例：localStorage.setItem('user', {name: 'Alice'}) 会存为 "[object Object]"

容量超限处理

javascript 复制代码

try {
  localStorage.setItem('bigData', new Array(1024*1024*5).join('0'));
} catch (e) {
  console.error('存储失败，容量超限！', e);
}

安全隐患
- XSS攻击风险：恶意脚本可读取全部存储
- 防御方案：避免存储敏感信息，启用CSP策略
性能影响
- 频繁读写大数据会阻塞主线程（Web Worker中不可用！）

五、企业级实践建议

封装健壮的存储工具库

javascript 复制代码

export const storage = {
  get(key) {
    try { return JSON.parse(localStorage.getItem(key)); } 
    catch { return null; }
  },
  set(key, val) {
    if (typeof key !== 'string') throw new Error('Invalid key');
    localStorage.setItem(key, JSON.stringify(val));
  }
};

自动过期策略

javascript 复制代码

function setWithExpire(key, val, expireDays) {
  const data = { 
    value: val, 
    expire: Date.now() + expireDays * 86400000 
  };
  localStorage.setItem(key, JSON.stringify(data));
}

SSR/SSG兼容方案
- 使用 typeof window !== 'undefined' 避免服务端报错

六、扩展知识：进阶应用场景

状态持久化案例
- Vue/Pinia中使用插件同步Vuex到localStorage
离线数据同步
- PWA应用中保存待提交数据（如表单草稿）
性能优化
- 缓存静态资源（CSS/图片Base64）减少网络请求

七、总结

明确选择依据：数据是否需要持久化？是否要跨标签共享？
遵循安全规范：绝不存储密码、令牌等敏感数据
未来趋势：IndexedDB更适合大规模数据存储（＞10MB）