localStorage本身不提供加密机制，所有数据以明文存储且可被开发者工具直接查看或篡改；若需加密读写，必须在存取前手动加解密，核心在于前端加密逻辑的合理引入而非HTML5功能。
HTML5 的 localStorage 本身不提供任何加密机制，所有数据以明文形式存储在用户浏览器中，可被开发者工具直接查看、篡改。若需“加密读写”，必须在存取前手动加解密——核心不是 HTML5 功能，而是前端加密逻辑的合理引入。
为什么不能依赖 localStorage 自带加密？
localStorage 是纯客户端、无访问控制、无加密能力的键值存储。它设计初衷是缓存非敏感数据（如主题偏好、折叠状态）。即使使用 HTTPS 传输，一旦数据写入 localStorage，就完全暴露在用户本地环境中：
- 任何已打开的同源页面脚本均可读写该域下的 localStorage；
- 用户可通过浏览器开发者工具（Application → Storage）一键查看、编辑或清空；
- 恶意扩展或 XSS 攻击成功后，极易窃取其中内容。
可行的前端加密方案（轻量实用）
对一般敏感度不高的场景（如 token 加盐缓存、用户设置混淆），推荐使用基于 Web Crypto API 的对称加密（AES-GCM），兼顾安全性与兼容性（Chrome 68+、Firefox 60+、Edge 79+、Safari 16.4+ 支持）：
-
生成密钥：用
crypto.subtle.generateKey('AES-GCM', true, ['encrypt', 'decrypt'])创建密钥，建议派生自用户密码或硬编码固定 salt（仅限低敏场景）； -
加密写入：将字符串转为 Uint8Array → 调用
encrypt()→ Base64 编码密文 + IV + AAD 后存入 localStorage； -
解密读取：从 localStorage 取出 Base64 数据 → 解码 → 提取 IV 和密文 → 调用
decrypt()→ 转回字符串。
⚠️ 注意：密钥不可硬编码在 JS 中，否则等同于无加密；高敏感数据（如密码、支付信息）仍应避免存入前端存储，优先走服务端会话管理。
立即学习“前端免费学习笔记（深入）”；
简易替代方案（兼容老浏览器）
若需支持 IE 或旧版 Safari，可用成熟库如 CryptoJS（AES-CBC 模式）：
- 引入 crypto-js.min.js；
- 约定一个保密的 password 字符串（建议结合用户输入动态生成）；
- 写入：
localStorage.setItem('key', CryptoJS.AES.encrypt(JSON.stringify(data), password).toString())； - 读取：
const bytes = CryptoJS.AES.decrypt(localStorage.getItem('key'), password); const data = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));。
该方式虽弱于 Web Crypto（无认证加密、易受填充预言攻击），但比明文存储强得多，适合快速落地。
关键提醒：加密 ≠ 安全存储
前端加密只是提升数据窃取门槛，并不能解决根本风险：
- 加密密钥若参与运算的密码来自前端（如固定字符串或用户弱口令），攻击者逆向 JS 即可还原；
- localStorage 数据生命周期长，长期驻留增加暴露窗口；
- 真正敏感操作（如登录态校验、权限判断）必须由服务端完成，前端只做展示和缓存辅助。
把加密当成“保险柜”是误区——它更像给纸条加了层信封，而信封就放在门口信箱里。
