HTML中Cookie的设置读取删除基本操作方法汇总-html教程-PHP中文网

document.cookie是受路径、编码、过期等严格约束的字符串，非对象；必须显式指定path=/才能跨路径访问，中文需encodeuricomponent编码且decodeuricomponent解码，删除需完全匹配原始path/domain/secure，httponly cookie无法js读取。

html中cookie的设置读取删除基本操作方法汇总

document.cookie 不是对象，不能直接读属性或赋值对象；它是一串受路径、编码、过期时间严格约束的字符串，写错一个参数就可能“设了但读不到”“删了但还在”。

document.cookie 写入必须显式指定 `path=/` 才能跨页面访问

浏览器默认把没写 path 的 cookie 自动设为当前 URL 路径（比如 /dashboard/user），结果你在 /settings 页面里调 document.cookie 就看不到它——不是没写成功，是根本不在那个路径下生效。

全站可用：用 document.cookie = "theme=dark; path=/";
仅限子路径（如 /api/）：必须带末尾斜杠，path=/api/ 和 path=/api 是两个不同作用域
React/Vue 单页跳转不刷新时，JS 上下文仍属原路径，path 不匹配会导致“刚设完就读不到”

中文或特殊字符必须用 `encodeURIComponent()` 编码，且读取后必须 `decodeURIComponent()`

document.cookie = "name=张三" 看似正常，实际会截断或乱码，因为 cookie 值只允许 URL-safe 字符，浏览器不会自动编解码。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

正确写入：document.cookie = "name=" + encodeURIComponent("张三") + "; path=/";
正确读取：const value = decodeURIComponent(document.cookie.split("; ").find(row => row.startsWith("name="))?.split("=")[1] || "");
别用 escape()：已废弃，对 Unicode 处理错误；encodeURIComponent() 是唯一可靠选择

删除 Cookie 必须复刻原始 `path`、`domain`、`Secure` 才能生效

浏览器按 key + path + domain + Secure 四元组识别 cookie。删不掉不是 bug，是匹配失败。

原始写入：document.cookie = "session=xyz; path=/admin/; domain=.example.com; Secure";
对应删除：document.cookie = "session=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/admin/; domain=.example.com; Secure";
domain 写成 example.com 而不是 .example.com？不匹配，删不掉
本地开发用 http://localhost 却加了 Secure？该 cookie 根本不会被写入（Application > Cookies 面板为空）

同一个 key 多次写入会覆盖，但读取时 `split("; ")` 可能取错值

document.cookie = "a=1"; document.cookie = "a=2"; 最终生效的是后者，但如果你用 split("; ").find(...) 逻辑只取第一个匹配项，就会误读为 "1"。

读取前先确保没有同名 cookie 干扰，或改用更健壮的解析方式（如正则匹配完整键值对）
值本身含分号或空格虽少见，但 split("; ") 无法处理；推荐用 document.cookie.match(/(?:^|; )a=([^;]*)/)?.[1]
HttpOnly cookie 永远无法通过 document.cookie 读取，这是安全限制，不是操作失误

最常被忽略的其实是 path 和编码的耦合问题：不写 path=/ 导致跨路由失效，不编码中文导致值损坏，这两者一旦出错，调试时很难一眼定位——因为控制台看不出异常，只是“行为不符合预期”。