HTML5中LocalStorage与SessionStorage生命周期区别

HTML5中LocalStorage与SessionStorage生命周期区别的重点在于把前置条件、操作顺序和容易误判的地方分清楚。

LocalStorage永久保存直至手动清除，SessionStorage仅在当前标签页有效且关闭即销毁；两者均同源限制、仅存字符串、容量5–10MB，但生命周期本质不同。

LocalStorage 永久保存，直到手动清除；SessionStorage 仅在当前浏览器标签页生命周期内有效，关闭标签即销毁。

LocalStorage 的生命周期特点

数据写入后会持久化存储在浏览器中，不随页面刷新、关闭浏览器或重启电脑而丢失。除非用户主动调用 localStorage.removeItem() 或 localStorage.clear()，或通过浏览器设置手动清除缓存，否则数据一直存在。适合存储长期有效的信息，比如用户偏好设置、主题选择、登录态标识（注意：敏感信息如 token 不建议明文存这里）。

SessionStorage 的生命周期特点

数据只绑定到当前浏览器标签页（tab），同一域名下的新标签页会拥有独立的 sessionStorage 实例。页面刷新保留数据，但一旦关闭该标签页，所有数据自动清空。适合临时性、单次会话场景，例如表单草稿、导航状态、支付流程中的中间步骤数据。

两者共性与关键区别总结

1. 都仅限同源（协议+域名+端口）访问，跨域不可读写
2. 都只能存储字符串，对象需用 JSON.stringify() 和 JSON.parse() 转换
3. 容量通常为 5–10MB（具体取决于浏览器），远大于 Cookie
4. 生命周期差异是核心：LocalStorage 是“手动删除才消失”，SessionStorage 是“关掉这个 tab 就消失”

实际使用中的注意事项

不要依赖 sessionStorage 来保存关键业务数据——用户意外关闭标签页会导致数据丢失；也不要用 localStorage 存储敏感凭证，它不加密且容易被脚本读取。若需更安全的持久化方案，应结合后端 session 或 HttpOnly Cookie 使用。