javascript如何实现本地存储_localStorage和sessionStorage有什么区别？

localStorage持久存储，关闭浏览器仍保留；sessionStorage仅当前标签页有效，关闭即清除；二者同源共享、容量5–10MB、仅支持字符串、需JSON处理对象、受同源策略限制且不宜存敏感信息。

localStorage 和 sessionStorage 都是浏览器提供的客户端存储机制，用于在用户本地保存键值对数据，但它们的生命周期、作用域和使用场景有明显区别。

localStorage：持久化存储，关浏览器也不丢

数据会一直保留在浏览器中，除非手动清除（比如调用 localStorage.removeItem() 或清空浏览器缓存），即使关闭标签页、重启浏览器甚至电脑，数据依然存在。

• 适用场景：记住用户偏好（如主题色、语言）、长期登录状态标识、离线缓存内容
• 操作示例：
  
  localStorage.setItem('username', 'Alice');

const name = localStorage.getItem('username');

localStorage.removeItem('username');

localStorage.clear();

sessionStorage：仅限当前会话，关标签即失效

数据只在当前浏览器标签页（或窗口）的会话周期内有效。刷新页面保留，但关闭该标签页后数据自动清除；新开标签页即使访问同一网址，也无法读取之前 sessionStorage 的内容。

• 适用场景：表单临时草稿、多步流程中的中间状态、防重复提交的令牌
• 操作方式和 localStorage 完全一致：
  sessionStorage.setItem('step', '2');
sessionStorage.getItem('step');

关键区别总结

• 生命周期：localStorage 永久（直到手动清除），sessionStorage 仅当前标签页会话
• 共享范围：同源下所有标签页可共享 localStorage；sessionStorage 严格隔离，每个标签页独立
• 存储容量：两者通常都支持约 5–10MB（具体取决于浏览器），远大于 Cookie 的 4KB
• 数据类型：只支持字符串。存对象需先 JSON.stringify()，读取时用 JSON.parse()

注意事项

• 两者都受同源策略限制：协议、域名、端口必须完全一致才能访问
• 敏感信息（如 token、密码）不应直接存入，建议配合 HttpOnly Cookie + 后端校验
• 没有过期时间设置，需自行管理有效期（例如存入时间戳并读取时判断）
• 在无痕模式下部分浏览器会禁用或清空这些存储（尤其 sessionStorage）