sessionStorage 和localStorage

sessionStorage 和 localStorage 是 Web Storage API 的两种客户端存储机制，它们的核心区别在于数据持久性和作用域，同时共享部分 API 和设计理念。以下是详细对比：

一、核心区别

二、共同点（联系）

1. 存储方式

   • 均以键值对（Key-Value）形式存储数据，支持字符串类型。非字符串需手动序列化（如 JSON.stringify）。
   • 存储容量较大（通常约 5MB，不同浏览器有差异），远超 Cookie。

2. API 一致性
   提供相同的操作方法：

   // 存储
   localStorage.setItem('key', 'value');
   sessionStorage.setItem('key', 'value');
   
   // 读取
   const data = localStorage.getItem('key');
   const data = sessionStorage.getItem('key');
   
   // 删除
   localStorage.removeItem('key');
   sessionStorage.removeItem('key');
   
   // 清空
   localStorage.clear();
   sessionStorage.clear();
   

3. 存储位置
   数据仅保存在客户端，不自动发送到服务器，适合敏感度较低的非关键数据。

4. 同源策略
   均遵循同源策略，不同源的页面无法互相访问存储数据。

三、选择依据

• 使用 localStorage 的场景

  • 需要长期保存的数据（如用户主题、语言设置）。
  • 多标签页需要共享的数据（如登录状态）。
  • 需要大容量缓存的静态资源（如离线应用数据）。

• 使用 sessionStorage 的场景

  • 临时保存单次会话数据（如表单草稿）。
  • 防止页面刷新或标签页意外关闭导致数据丢失（需配合 beforeunload 事件）。
  • 隔离不同标签页的状态（如避免多标签页操作冲突）。

四、注意事项

1. 安全性

   • 避免存储敏感信息（如密码、令牌），因数据可被 JavaScript 访问，易受 XSS 攻击。
   • 敏感数据应加密或优先通过服务端会话管理。

2. 数据类型限制

   • 只能存储字符串，复杂数据需序列化（注意 JSON.parse 的容错处理）。

3. 兼容性

   • 现代浏览器均支持，但需注意旧版 IE（8+ 支持）。

五、代码示例

// 存储数据（同源跨标签页共享）
localStorage.setItem('theme', 'dark');

// 存储临时数据（仅当前标签页有效）
sessionStorage.setItem('formDraft', JSON.stringify({ name: 'Alice' }));

// 读取数据
const theme = localStorage.getItem('theme'); // 'dark'
const draft = JSON.parse(sessionStorage.getItem('formDraft')); // { name: 'Alice' }

// 关闭标签页后，sessionStorage 中的 formDraft 会被清除

总结

• localStorage：持久化、跨标签页共享，适合长期数据。
• sessionStorage：会话级、隔离性，适合临时数据。
  根据数据生命周期和作用域需求选择，合理利用可提升用户体验并减少服务端压力。