JavaScript操作Cookie时，中文和特殊字符必须用encodeURIComponent编码、decodeURIComponent解码，且仅编码value部分；键名一般无需编码，读取需手动解析并处理异常。
JavaScript 中操作 Cookie 时，中文和特殊字符（如空格、逗号、分号、等号）必须编码，否则会导致写入失败、读取乱码或被浏览器截断。核心原则是：写入前 encodeURIComponent，读取后 decodeURIComponent，且避免直接拼接原始字符串。
写入 Cookie 前必须编码中文和特殊字符
Cookie 的值部分不支持 UTF-8 原生字节，也不允许未转义的空格、逗号、分号、等号、双引号等。直接赋值中文（如 document.cookie = "name=张三"）可能被截断或解析错误。
- 始终用
encodeURIComponent()编码值（不是encodeURI()），它会正确处理中文、空格、斜杠、问号等 - 键名（cookie 名）一般只含字母数字和下划线，无需编码；但若含特殊符号也建议同样编码
- 注意：不要对整个
key=value字符串编码，只编码 value 部分
读取 Cookie 时必须解码，且需手动解析
浏览器返回的 document.cookie 是一个分号分隔的字符串，原始 value 是编码后的形式，不手动解码就看到的是类似 %E5%BC%A0%E4%B8%89 的乱码。
- 先按
;拆分，再按=分离 key 和 value - 对 value 使用
decodeURIComponent()还原中文和符号（注意捕获URIError异常，以防损坏数据） - 推荐封装一个安全的读取函数，跳过空白、忽略大小写、处理重复 key 等边界情况
注意 Cookie 的限制与兼容性细节
即使编码正确，仍可能因其他限制导致失效：
立即学习“Java免费学习笔记（深入）”；
- 单个 Cookie 值最大约 4KB，超长内容应考虑 localStorage 或服务端存储
- 某些旧浏览器（如 IE）对
encodeURIComponent的实现略有差异，但现代环境基本无问题 -
document.cookie不支持直接设置path或domain等属性的编码，这些属性本身不含中文，无需编码 - 若服务端也写 Cookie（如 Node.js 的
res.cookie()），需确保前后端使用相同编码逻辑，避免双重编码
一个简洁可靠的工具函数示例
以下是一个兼顾安全性与可用性的轻量级 Cookie 操作封装：
const Cookie = {
set(key, value, options = {}) {
let cookieStr = `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
if (options.expires) cookieStr += `; expires=${options.expires.toUTCString()}`;
if (options.path) cookieStr += `; path=${options.path}`;
if (options.domain) cookieStr += `; domain=${options.domain}`;
if (options.secure) cookieStr += '; secure';
if (options.sameSite) cookieStr += `; SameSite=${options.sameSite}`;
document.cookie = cookieStr;
},
get(key) {
const cookies = document.cookie.split('; ').reduce((acc, pair) => {
const [k, v] = pair.split('=');
acc[decodeURIComponent(k)] = decodeURIComponent(v);
return acc;
}, {});
return cookies[encodeURIComponent(key)] ?? undefined;
}
};
// 使用：Cookie.set('username', '张三', { path: '/' });
// console.log(Cookie.get('username')); // → '张三'
