无需登录 数据私有 本地保存

LocalStorage查看器 - 浏览器存储键值探查

13
0
0
0
已选 0 项
键名 值预览 类型 大小 操作

暂无数据

点击「添加」按钮创建第一个键值对，或使用浏览器控制台设置 localStorage

共 0 条记录 已用 0 B / ~5 MB
已选 0 项
键名 值预览 类型 大小 操作

暂无数据

SessionStorage 在标签页关闭后自动清除

共 0 条记录 已用 0 B / ~5 MB
常见问题与知识点

LocalStorage（本地存储）是浏览器提供的一种 Web Storage API，允许网站以键值对的形式在用户浏览器中持久化存储数据。数据保存在客户端，不会随HTTP请求发送到服务器，存储容量通常为5MB左右，无过期时间，除非用户手动清除或网站主动删除，否则数据会一直保留。

两者都使用相同的API，但生命周期不同：
• LocalStorage：数据永久保留，除非手动清除。关闭浏览器、重启电脑后数据依然存在。
• SessionStorage：数据仅在当前浏览器标签页会话期间有效。关闭标签页或浏览器窗口后，数据立即被清除。
另外，两个存储空间是相互独立的，互不影响。

大多数现代浏览器（Chrome、Firefox、Edge、Safari）对每个源（origin）的 LocalStorage 容量限制约为5MB（约5,242,880字节）。超出限制时，浏览器会抛出 QuotaExceededError 异常。需要注意的是，Safari 在隐私/无痕模式下可能将配额设为0，导致 LocalStorage 不可用。

• 容量：Cookie 仅约4KB，LocalStorage 约5MB。
• 传输：Cookie 每次HTTP请求都会自动发送到服务器；LocalStorage 数据仅存于客户端，不随请求发送。
• 过期：Cookie 可设置过期时间；LocalStorage 永久存储。
• API：LocalStorage 提供简洁的 setItem/getItem/removeItem 方法；Cookie 操作相对繁琐。

不建议在 LocalStorage 中存储敏感信息（如密码、Token、个人隐私数据），因为：
• LocalStorage 可通过浏览器开发者工具直接查看。
• 容易受到XSS攻击（跨站脚本攻击），恶意脚本可读取存储内容。
如确需存储，应对数据进行加密处理，但仍无法完全规避风险。对于认证Token，建议使用 HttpOnly Cookie 配合后端管理。

数据丢失的常见原因：
1. 用户手动清除浏览器数据（缓存、Cookie、站点数据）。
2. 浏览器隐私/无痕模式下，LocalStorage 可能不可用或会话结束后清除。
3. 某些浏览器自动清理策略（如iOS Safari在存储空间不足时）。
4. 网站代码中调用了 localStorage.clear() 或 removeItem()。
5. 存储配额已满，后续写入失败。

LocalStorage 的键和值都只能是字符串。如需存储对象、数组、数字等复杂类型，需要使用 JSON.stringify() 序列化后存储，读取时使用 JSON.parse() 还原。存储非字符串类型时会自动调用 .toString() 方法转换。

当 LocalStorage 或 SessionStorage 被其他标签页或窗口修改时，浏览器会触发 storage 事件。该事件对象包含 key（被修改的键）、oldValue（旧值）、newValue（新值）等属性。需要注意的是，触发修改的当前页面不会收到该事件，仅其他同源页面会收到。
🔧 相关工具