document.cookie 不能安全存储用户数据，因其是无类型、无编码、无隔离的字符串接口；localstorage 同样不适用存 token 或密码，因 xss 下可被直接窃取。
JavaScript 操作 document.cookie 的真实限制
不能靠 document.cookie 安全存储用户数据——这是根本前提。它本质是字符串拼接接口，没有类型、无自动编码、无作用域隔离，且默认完全暴露给前端脚本。
常见错误现象：document.cookie = "token=abc123" 后，document.cookie 返回整个 cookie 字符串（含其他域名/路径的），无法直接解析；手动 split ; 解析易出错，且无法区分同名但 path/domain 不同的 cookie。
实操建议：
- 只用
document.cookie设置简单、非敏感的状态标识（如theme=dark、locale=zh-CN） - 设置时必须显式指定
Secure（仅 HTTPS）、HttpOnly（禁 JS 访问）、SameSite=Lax或Strict，但注意：HttpOnly会让 JavaScript 根本读不到，所以它和“JS 操作”互斥 - 避免在 cookie 值中存 JSON 字符串——特殊字符（如
=、;、空格）需手动encodeURIComponent，读取时再decodeURIComponent，否则写入即截断
为什么 localStorage 也不适合存 token 或密码
localStorage 是同步 API、无过期机制、同源下所有脚本可读写，XSS 攻击一旦成功，攻击者一行 localStorage.getItem('auth_token') 就能拿走全部凭证。
立即学习“Java免费学习笔记（深入）”；
使用场景仅限：缓存非敏感 UI 状态（如折叠面板开关、搜索历史关键词），且需主动清理旧数据。
NetShop软件特点介绍： 1、使用ASP.Net(c#)2.0、多层结构开发 2、前台设计不采用任何.NET内置控件读取数据，完全标签化模板处理，加快读取速度3、安全的数据添加删除读取操作，利用存储过程模式彻底防制SQL注入式攻击4、前台架构DIV+CSS兼容IE6,IE7,FF等，有利于搜索引挚收录5、后台内置强大的功能，整合多家网店系统的功能，加以优化。6、支持三种类型的数据库：Acces
实操建议：
- 绝不存
access_token、refresh_token、user_id、email等可关联身份的数据 - 若必须缓存 token，优先走
HttpOnly + Secure + SameSite的 cookie，并配合后端短生命周期（如 15 分钟）+ 绑定 user-agent/IP - 对
localStorage写入前做最小化校验：if (typeof value === 'string' && value.length ，防止意外写入过大或非字符串值导致后续 <code>JSON.parse报错
真正安全的用户数据存储：服务端 session + 前端临时内存
安全边界不在前端，而在「凭证不落地」——token 存内存，用完即弃；敏感操作强制二次确认或 re-auth；所有关键状态由服务端控制生命周期。
实操建议：
- 登录成功后，把
access_token存进闭包变量或Map实例（如const tokens = new Map()），而非任何持久化存储 - 封装请求函数，自动注入 token 并监听 401 响应：触发清除内存 token + 跳转登录页
- 敏感操作（如支付、改密）前，调用
fetch('/api/verify-session', { credentials: 'include' })，依赖后端验证HttpOnlycookie 的有效性，而非信任前端任意存储的值
const authStore = {
_token: null,
setToken(token) {
this._token = token;
},
getToken() {
return this._token;
},
clearToken() {
this._token = null;
}
};
// 请求拦截示例
async function apiCall(url, options = {}) {
const token = authStore.getToken();
if (token) {
options.headers = {
...options.headers,
Authorization: `Bearer ${token}`
};
}
const res = await fetch(url, options);
if (res.status === 401) {
authStore.clearToken();
window.location.href = '/login';
}
return res;
}
容易被忽略的关键点
很多人以为加密 localStorage 就安全了——但只要密钥存在前端（哪怕混淆、拆分、硬编码），就等于没加密。攻击者调试时一眼看到 atob('a2V5XzIwMjQ=') 就是 key_2024。
另一个盲区：开发环境常关掉 Secure 属性方便 HTTP 调试，但上线后忘记补上，导致 token 明文走 HTTP；或 SameSite=None 却没配 Secure，现代浏览器直接拒收。
真正需要盯住的，是每次部署前检查响应头：Set-Cookie 是否含 Secure; HttpOnly; SameSite=Lax，以及前端代码里有没有 localStorage.setItem 出现敏感字段名（grep -r "password\|token\|auth" src/）。
