JavaScript客户端存储有三类:localStorage(持久化字符串存储,需JSON序列化/解析,容量5–10MB)、sessionStorage(标签页级临时存储,关闭即清空)、Cookie(需设expires/max-age才持久,4KB/个,受path/domain限制);均不安全,敏感数据禁用。

JavaScript 在客户端存储数据,核心就三条路:localStorage、sessionStorage 和 cookies,选错会导致数据意外丢失、跨域失效或被服务端反复传输。
localStorage 存的是字符串,非对象
localStorage 只接受字符串作为值,直接存对象会变成 [object Object],取出来无法还原。
- 存之前必须用
JSON.stringify()序列化 - 取出来后必须用
JSON.parse()解析,且要加try/catch防止损坏的 JSON 导致脚本中断 - 超过 5–10MB(依浏览器而异)会抛出
QuotaExceededError,不是所有浏览器都提示清楚
localStorage.setItem('user', JSON.stringify({id: 123, name: 'Alice'}));
const user = JSON.parse(localStorage.getItem('user') || '{}');
sessionStorage 的生命周期只绑定当前 tab
sessionStorage 不是“用户会话”,而是“页面会话”——关闭 tab 就清空,新开 tab 或 iframe 完全隔离,哪怕 URL 一模一样也不共享。
- 适合临时表单草稿、向导步骤状态,但别指望它在多个窗口间同步
- 和
localStorageAPI 完全一致,只是作用域不同 - 刷新页面保留,但
location.reload(true)强制重载也不会清空它
Cookie 要手动设 expires 或 max-age 才持久
不设过期时间的 cookie 是 session cookie,关浏览器就丢;想持久必须显式声明有效期,且注意路径(path)和域名(domain)限制。
立即学习“Java免费学习笔记(深入)”;
- 写 cookie 用
document.cookie = 'key=value; expires=...; path=/; secure; SameSite=Lax' -
secure表示仅 HTTPS 传输,SameSite影响跨站请求携带行为 - 每个 cookie 最大 4KB,总数量也有限制(通常 100–200 个),超了老的会被静默丢弃
敏感数据别放客户端存储里
无论 localStorage、sessionStorage 还是 cookie,只要在浏览器里,就可能被 XSS 脚本读取。token、密码、身份证号这类东西,绝不该明文存在其中。
- JWT 如果必须存,至少用
httpOnly+securecookie(但 JS 就读不到,得靠服务端验证) - 前端能存的最多是脱敏 ID、主题偏好、语言设置这类无害信息
- localStorage 没有同源策略外的隔离机制,同一域名下所有脚本都能读写
真正难的不是怎么存,是怎么判断该不该存、存多久、谁有权读——这些决定比代码多敲两行重要得多。











