Cookie是浏览器在客户端存储键值对的机制，随同源请求自动发送；其API原始，需手动拼接字符串设置属性，读取时需解析并解码，且与localStorage的核心区别在于参与网络请求和精细作用域控制。
Cookie 是浏览器提供的一种在客户端存储少量数据的机制，本质是键值对字符串，随每次同源 HTTP 请求自动发送到服务器。
Cookie 的基本写法与注意事项
通过 document.cookie 设置或读取，但它的 API 极其原始：不能直接赋值对象，不支持过期时间参数传入函数，所有配置必须拼进字符串里。
-
document.cookie是一个可写的 getter/setter，写入时只接受字符串格式，例如：name=value; expires=Wed, 01 Jan 2025 00:00:00 GMT; path=/; domain=.example.com; Secure; HttpOnly - 多个属性之间用分号加空格分隔，
expires必须是完整 GMT 时间字符串，不是毫秒数或 Date 对象 - 设置
path=/才能在全站访问；省略则默认为当前路径（比如/user/profile下设的 cookie 在/下读不到） -
HttpOnly无法通过 JS 读取，只能由服务端设置；前端设了也无效，且不会报错
document.cookie = "theme=dark; expires=" + new Date(Date.now() + 86400000).toUTCString() + "; path=/; SameSite=Lax";
为什么 document.cookie 读取结果看起来像乱码？
因为 document.cookie 返回的是所有可访问 cookie 的拼接字符串，用分号+空格分隔，且不自动 URL 解码——如果存的时候用了 encodeURIComponent()，读出来就必须手动 decodeURIComponent()。
- 浏览器对 cookie 值中的空格、等号、分号、逗号等字符会自动编码，但行为不统一，建议始终自己编码/解码
- 读取时需按
;拆分，再按=分割键值，还要 trim 空格 - 没有内置方法判断某个 cookie 是否存在，只能遍历解析后匹配
function getCookie(name) {
const cookies = document.cookie.split("; ").reduce((acc, pair) => {
const [k, v] = pair.split("=");
acc[k] = decodeURIComponent(v);
return acc;
}, {});
return cookies[name];
}
Cookie 和 localStorage / sessionStorage 有什么根本区别？
核心差异不在容量或 API，而在于「是否参与网络请求」和「作用域控制粒度」。
JSON入门指南 中文WORD版
下载
JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 的交互。本文将快速讲解 JSON 格式，并通过代码示例演示如何分别在客户端和服务器端进行 JSON 格式数据的处理。
立即学习“Java免费学习笔记（深入）”；
- Cookie 会随每个同源请求自动附加在
Cookie请求头中，增大请求体积；localStorage完全不发给服务器 - Cookie 支持
Domain、Path、SameSite、Secure等精细作用域控制；localStorage只看协议+域名+端口 - Cookie 大小限制约 4KB/条，
localStorage通常有 5–10MB；但 Cookie 总数也受限（主流浏览器约 180 条） - Cookie 可被服务端设置（如登录后 Set-Cookie），
localStorage只能前端操作
现代前端还该用 Cookie 存用户偏好这类数据吗？
一般不该。除非你明确需要服务端参与（比如 SSR 渲染要读取主题色），否则优先用 localStorage 或 sessionStorage。
- Cookie 增加请求头体积，影响首屏性能，尤其移动端弱网下明显
- SameSite 默认策略（Lax）已阻止跨站 POST 请求携带 Cookie，很多前端跳转场景会意外失效
- 隐私模式、第三方 Cookie 屏蔽（Chrome 115+ 默认禁用第三方 Cookie）会让依赖 Cookie 的前端逻辑静默失败
- 如果只是存 dark/light 模式、语言偏好，
localStorage.setItem("theme", "dark")更简单、更可控
真正容易被忽略的是：Cookie 的 expires 和 max-age 并存时，后者优先；而 max-age 是秒数，expires 是绝对时间，混用极易出错。另外，SameSite=None 必须搭配 Secure，否则现代浏览器直接拒绝设置。
