html cookie设置与读取

2026-04-29 21:00:37 613阅读 0评论

别把隐私扔进公海：Cookie 设置与读取的实战心法

你有没有过这种体验：在电商网站登录一次后，下次打开自动保持登录状态；或者不小心关闭了标签页，购物车里刚才选好的商品依然保留着。这些看似简单的功能，背后都是 Cookie 在默默工作。很多刚入行的朋友觉得 Cookie 就是键值对存起来的事，直到遇到中文乱码或者安全校验不通过才发现问题。今天咱们聊聊怎么稳健地处理 Cookie，避开那些容易踩的坑。

为什么不能直接在 HTML 里操作

首先要明确一个概念，浏览器原生并没有提供一个类似 <input type="cookie"> 的标签来存储数据。虽然在技术讨论中常提“前端 Cookie"，但实际操控全靠 JavaScript 的 document.cookie 属性。如果你试图在纯静态 HTML 文件里硬塞 Cookie 而不通过 HTTP 响应头或脚本，那浏览器是根本不认的。这意味着你的代码逻辑必须封装在脚本环境中执行。

设置 Cookie 时的“转义”陷阱

直接拼接字符串是最常见的错误来源。比如下面这段写法，如果值里包含空格或中文，后续读取时解析就会错乱：

// 不推荐的写法
document.cookie = "username=张三";

稳妥的做法永远是先对关键信息进行编码。使用 encodeURIComponent() 处理 Value 部分，能有效防止特殊字符打断 Cookie 的结构。同时，别忘了设置过期时间，否则用户一关闭窗口，数据就全丢了。完整的设置函数通常长这样：

function setCookie(name, value, days) {
    let expires = "";
    if (days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    // 核心点：确保值被正确编码
    document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
}

这里有个细节容易被忽视：path=/。如果不指定路径，这个 Cookie 可能只在当前目录有效，导致其他页面访问不到，调试的时候会很懵。

读取数据的“切片”逻辑

读取过程看起来简单，其实全是正则和分割的逻辑挑战。document.cookie 返回的是一个长长的字符串，里面所有 Cookie 都用分号隔开。你需要做的是找到对应的名字，再提取值。

这里推荐一个简单的获取封装，利用 split 拆分，再匹配前缀：

function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return decodeURIComponent(parts.pop().split(";").shift());
    return null;
}

注意 decodeURIComponent：因为写入时做了编码，读取时必须还原，否则拿到的是 URL 格式的一串乱码。这一步在调试控制台打印出来检查非常方便，避免用户看到错误的界面反馈。

彻底删除与安全性考量

想让 Cookie 消失，不是调用 delete 方法，而是把过期时间设置成过去的时间。这在实现“退出登录”功能时很关键。

但在现代开发中，仅仅关注读写是不够的，安全性才是重头戏。如果你在 Cookie 里存了用户权限 Token，一定要警惕中间人攻击。建议在服务器端设置 Cookie 时加上 Secure（仅 HTTPS 传输）、HttpOnly（禁止 JS 读取防 XSS）以及 SameSite（防 CSRF 攻击）。特别是 SameSite=Strict 或 Lax 配置，能有效限制跨站携带，保护用户会话不被恶意利用。