17370845950

localStorage 持久存储，关闭浏览器不丢失；sessionStorage 仅限当前标签页会话，关闭即清空。二者均以字符串键值对存储，API 相同，容量约 5–10 MB，不参与网络请求，且均不安全，不可存敏感信息。

JavaScript 通过 localStorage 和 sessionStorage 提供了两种客户端存储机制，它们都以键值对（字符串）形式保存数据，但生命周期和作用域不同——localStorage 持久保存，除非手动清除；sessionStorage 仅在当前标签页会话期间有效，关闭标签即清空。

基本操作方法一致

两者 API 完全相同，常用方法包括：

• setItem(key, value)：存入数据（value 会被自动转为字符串）
• getItem(key)：读取数据，返回字符串或 null
• removeItem(key)：删除指定键
• clear()：清空所有键值对
• key(index)：获取第 index 个键名（用于遍历）
• length：返回当前存储的键值对数量

注意：只能存字符串。若要存对象或数组，需先用 JSON.stringify() 序列化，读取时用 JSON.parse() 还原。

localStorage：跨会话持久存储

数据保存在浏览器中，不随页面刷新、关闭浏览器或重启电脑而丢失，有效期为永久（除非用户手动清除或代码调用 clear()/removeItem()）。

立即学习“Java免费学习笔记（深入）”；

适用场景：

• 用户偏好设置（如主题色、语言）
• 长期缓存非敏感数据（如首页推荐列表）
• 离线状态下的临时数据暂存

示例：localStorage.setItem('theme', 'dark') 后，下次打开网页仍可读到 'dark'。

sessionStorage：单标签页会话级存储

数据只在当前浏览器标签页（tab）内有效，页面刷新保留，但关闭该标签页后数据立即销毁；新开标签页或窗口互不共享。

适用场景：

• 表单草稿（防止意外刷新丢失）
• 登录态中间状态（如 OAuth 跳转时暂存回调参数）
• 单页应用中路由级临时状态（如搜索关键词、筛选条件）

示例：sessionStorage.setItem('searchQuery', 'JavaScript')，刷新页面还在，关掉这个标签就没了。

关键区别总结

对比维度如下：

• 生命周期：localStorage 永久；sessionStorage 仅限当前 tab 的会话（从打开到关闭）
• 作用域：两者都在同源（协议+域名+端口）下隔离；但 sessionStorage 还额外按 tab 隔离，不同 tab 即使同页面也互不可见
• 容量限制：通常都是 5–10 MB（因浏览器而异），远大于 Cookie（4 KB）
• 是否参与网络请求：都不发送给服务器（与 Cookie 不同）
• 安全性：均易被 XSS 攻击读取，切勿存储密码、token 等敏感信息