localStorage 不适合存储任何敏感数据,因其明文可读、易受XSS攻击;禁止存JWT、银行卡号、密钥、权限标识等;仅宜存深色模式、语言偏好等低风险UI配置;敏感数据应改用httpOnly Cookie、sessionStorage或后端下发。

根本上,localStorage 不适合存储任何敏感数据。它不是安全容器,而是浏览器中一个开放、明文、可被任意同源脚本读写的键值仓库。XSS 一旦发生,攻击者几行代码就能遍历、窃取、篡改甚至清空全部内容。所谓“加密后存 localStorage”并不能解决本质问题——密钥必然在前端运行时可见,解密逻辑可被 hook,HTTPS 和 CSP 缺失时,加密形同虚设。
明确哪些数据绝对不能进 localStorage
以下类型的数据,无论是否加密,都禁止存入 localStorage:
- 用户身份凭证:JWT token、session ID、refresh token
- 支付与身份信息:银行卡号、CVV、身份证号、护照号
- 密钥材料:API 密钥、AES 密钥、私钥、盐值(salt)
- 权限标识:isAdmin: true、role: "admin" 等易被前端伪造的字段
- 密码或口令明文/哈希(即使加盐)
真正该存什么?只存低风险、用户主动设置、需跨会话持久化的 UI 配置
localStorage 的合理用途非常有限,仅限于不影响系统安全、不涉及认证鉴权的纯前端状态:
- 深色模式开关(darkMode: true)
- 界面语言偏好(locale: "zh-CN")
- 折叠面板展开状态(sidebarCollapsed: false)
- 自定义主题色(primaryColor: "#4a6fa5")
- 表格列宽或排序(无需服务端校验)
这类数据即使被读取,也不会导致账户劫持或数据泄露;明文存储在 HTTPS + 严格 CSP 环境下已足够安全。
立即学习“前端免费学习笔记(深入)”;
若必须存少量敏感配置,优先用替代方案而非硬刚 localStorage
与其在 localStorage 上做复杂加解密,不如从架构层面规避风险:
- 认证类 token → 改用 httpOnly + Secure Cookie:服务端签发,JS 无法读取,配合短时效、绑定 UA/IP、服务端二次校验
- 短期临时数据 → 用 sessionStorage:标签页关闭即销毁,天然降低泄露窗口期;可自行封装带时间戳和自动清理的 wrapper
- 环境或开关类配置 → 后端动态下发:通过 API 或首屏 JSON 注入,避免前端硬编码或本地持久化
- 调试/灰度标识 → 简单混淆即可:如键名倒序 + base64 编码值,不为防破解,只为避免一眼识别
如果非要用 localStorage 存结构化配置,必须守住四条底线
仅当满足全部条件时,才考虑对低敏配置做轻量处理:
- 全站强制 HTTPS,所有资源(JS/CSS/图片/API)均走 https 协议
- CSP 头禁用 unsafe-inline、unsafe-eval,script-src 仅允许可信域名 + SRI 校验
- 写入前过滤:用户输入必须白名单校验(如仅允许 "zh", "en", "dark", "light");避免存储 HTML/JS 字符串
- 读取后安全使用:绝不 eval()、绝不 innerHTML 赋值、绝不 setTimeout() 执行;用 JSON.parse() 解析,textContent 渲染文本



















