javascript如何存储数据在客户端【教程】

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 一模一样也不共享。

• 适合临时表单草稿、向导步骤状态，但别指望它在多个窗口间同步
• 和 localStorage API 完全一致，只是作用域不同
• 刷新页面保留，但 location.reload(true) 强制重载也不会清空它

Cookie 要手动设 expires 或 max-age 才持久

不设过期时间的 cookie 是 session cookie，关浏览器就丢；想持久必须显式声明有效期，且注意路径（path）和域名（domain）限制。

• 写 cookie 用 document.cookie = 'key=value; expires=...; path=/; secure; SameSite=Lax'
• secure 表示仅 HTTPS 传输，SameSite 影响跨站请求携带行为

• 

  每个 cookie 最大 4KB，总数量也有限制（通常 100–200 个），超了老的会被静默丢弃

敏感数据别放客户端存储里

无论 localStorage、sessionStorage 还是 cookie，只要在浏览器里，就可能被 XSS 脚本读取。token、密码、身份证号这类东西，绝不该明文存在其中。

• JWT 如果必须存，至少用 httpOnly + secure cookie（但 JS 就读不到，得靠服务端验证）
• 前端能存的最多是脱敏 ID、主题偏好、语言设置这类无害信息
• localStorage 没有同源策略外的隔离机制，同一域名下所有脚本都能读写

真正难的不是怎么存，是怎么判断该不该存、存多久、谁有权读——这些决定比代码多敲两行重要得多。