Cookie是HTTP协议的一部分，由服务器通过Set-Cookie下发、浏览器自动存取，最大约4KB；JavaScript仅能通过document.cookie操作非HttpOnly Cookie，本质为字符串操作，需注意编码、路径、域名、Secure及安全配置。
Cookie 是浏览器保存在用户本地的一小段文本数据，最大约 4KB，用于在客户端维持状态。它不是 JavaScript 发明的，而是 HTTP 协议的一部分——服务器通过 Set-Cookie 响应头下发，浏览器自动存储，并在后续同域请求中回传。JavaScript 通过 document.cookie 可读写（仅限非 HttpOnly 的 Cookie），但本质是操作字符串，不提供原生对象接口。
Cookie 的基本结构和设置方式
每次赋值 document.cookie 都只能写入一个键值对，多个属性用分号分隔：
-
必需项：
key=value，如theme=dark；中文或特殊字符必须用encodeURIComponent()编码 -
过期时间：不设
expires或max-age就是会话 Cookie，关浏览器即失效；设了才是持久化 Cookie -
路径（path）：默认为当前页面路径，设
path=/才能在整个域名下访问 -
域名（domain）：如设
domain=.example.com，则a.example.com和b.example.com都能读取 - Secure：只在 HTTPS 下发送，HTTP 页面设了也无效，且不会被浏览器保存
如何安全地读取和删除 Cookie
读取时 document.cookie 返回的是一个长字符串，格式类似 "a=1; b=2; c=3"，需手动解析：
- 推荐封装一个
getCookie(name)函数，用split('; ')拆分后逐个匹配 key，并用decodeURIComponent()解码 value - 删除 Cookie 的本质是“覆盖”：把同名 Cookie 的
expires设为过去时间，例如Thu, 01 Jan 1970 00:00:00 GMT - 删除时必须确保
path和domain与当初设置时完全一致，否则删不掉
关键安全风险和应对措施
Cookie 不是保险箱，直接存密码、token 或敏感 ID 非常危险：
家电小商城网站源码1.0
下载
家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板，程序采用metinfo5.3.9 UTF8进行编码，软件包含完整栏目与数据。安装方法：解压上传到空间，访问域名进行安装，安装好后，到后台-安全与效率-数据备份还原，恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号：admin 密码：132456注意：如本地测试中127.0.0.1无法正常使用，请换成l
立即学习“Java免费学习笔记（深入）”；
-
别存明文凭证：即使加密，前端 JS 加密也无意义——代码可见，密钥可提取；登录态应由后端发
HttpOnly + SecureCookie 管理 -
慎用
SameSite=None：若必须跨站携带（如嵌入 iframe 的支付页），必须同时配Secure，否则现代浏览器拒绝发送 -
避免 XSS 泄露：敏感 Cookie 一定要后端加
HttpOnly标志（JS 无法读取）；前端操作的仅限 UI 偏好类低风险数据 -
优先用
max-age而非expires：前者是相对秒数，不受客户端时间篡改影响，更可靠
更推荐的做法：用 js-cookie 库代替原生操作
原生 API 繁琐易错，js-cookie@3.0.5+ 提供简洁安全的封装：
- 设置：
Cookies.set('cart', items, { expires: 7, path: '/', secure: location.protocol === 'https:' }) - 读取：
Cookies.get('cart')，自动解码，无需手动 parse - 删除：
Cookies.remove('cart')，自动匹配 path/domain - 它默认规避常见陷阱（如空格、分号转义），且 v3+ 版本修复了旧版 XSS 漏洞
基本上就这些。Cookie 本身不复杂，但细节容易忽略——尤其安全配置和路径匹配。日常开发中，能用后端 session 就别硬扛前端 Cookie，真要用，就设好 Secure、HttpOnly、SameSite 三件套，再配合合理过期策略。
