html5怎么使用cookie？如何用document.cookie读写cookie存储简单数据

在现代Web前端开发中，Cookie作为一种经典的轻量级数据存储方案，依然扮演着不可或缺的角色。它非常适合用于存储少量的简单文本数据，例如用户的偏好设置、会话标识或是访问状态。借助浏览器原生提供的 document.cookie 属性，开发者能够以极低的学习成本完成数据的读写操作，而无需引入任何额外的第三方库。这种机制不仅简单高效，而且在处理跨页面状态保持时具有独特的优势。

深入理解Cookie的运行机制与核心属性

Cookie本质上是浏览器保存在用户本地终端上的一小段数据片段。在典型的Web交互模型中，它通常由服务器端生成并通过HTTP响应头下发给客户端，但前端开发者同样可以通过JavaScript直接对其进行操作。每当浏览器向服务器发起后续请求时，会自动将当前作用域下符合条件的Cookie附加在HTTP请求头中一并发送，从而实现状态的追踪与识别。

一个完整的Cookie由多个关键属性构成，其中最基本的便是名称和值，它们以键值对的形式存在。除此之外，过期时间决定了该数据在浏览器中的存活周期，若未设置，则默认为会话级别，即浏览器关闭后失效。作用路径则限定了Cookie的有效范围，确保只有特定路径下的页面才能访问对应的数据。深入理解这些属性是正确管理本地存储的前提。

利用document.cookie实现数据的写入与读取

在前端通过JavaScript写入Cookie时，操作方式十分独特。开发者只需将一个符合特定格式的字符串赋值给 document.cookie 属性即可。该字符串通常包含名称、值以及可选的过期时间和路径属性，各项之间使用分号进行分隔。需要特别注意的是，这种赋值操作并不会清空或覆盖已有的其他Cookie，而是智能地执行新增或更新逻辑。如果赋值的名称已经存在，浏览器会更新其对应的值和属性；若不存在，则会创建一个新的Cookie。

与写入操作的便捷性不同，读取Cookie需要开发者自行处理字符串解析。直接访问 document.cookie 会返回当前页面有权访问的所有Cookie组成的长字符串，各个键值对之间由分号和空格隔开。为了精准获取某个特定名称的值，通常需要编写一个辅助函数，将长字符串按分隔符拆分后遍历比对。

在实际业务场景中，Cookie的值可能会包含分号、等号或空格等特殊字符。如果直接存储，会破坏Cookie的格式结构导致解析错误。因此，在写入前必须使用 encodeURIComponent 函数对值进行编码，而在读取后则需使用 decodeURIComponent 进行解码还原，以此保证数据的完整性与准确性。

// 写入基础Cookie，设置名称为theme，值为light
document.cookie = "theme=light";

// 写入带有过期时间和作用路径的Cookie
let expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 7);
document.cookie = "user_id=1001; expires=" + expireDate.toUTCString() + "; path=/";

// 封装读取函数，根据名称精准获取对应的值
function getCookie(name) {
    let cookieArr = document.cookie.split("; ");
    for (let i = 0; i < cookieArr.length; i++) {
        let itemArr = cookieArr[i].split("=");
        if (itemArr[0] === name) {
            return itemArr[1];
        }
    }
    return null;
}

// 处理包含特殊字符的数据存储与读取
let specialValue = "test;value=123";
document.cookie = "special_data=" + encodeURIComponent(specialValue) + "; path=/";

// 读取并解码特殊字符数据
let decodedValue = decodeURIComponent(getCookie("special_data"));
console.log(decodedValue);

Cookie的删除操作与安全存储规范

浏览器并未提供直接删除Cookie的专用接口，但开发者可以通过一种巧妙的方式来实现这一目的。其核心原理是修改目标Cookie的过期时间，将其强制设置为一个已经过去的时间点。当浏览器检测到某个Cookie的过期时间早于当前系统时间时，便会自动将其从本地存储中清除。在执行此操作时，务必确保指定的名称和路径与创建时完全一致，否则删除指令将无法生效。

尽管Cookie使用广泛，但在实际应用中必须严格遵守一些规范与限制。首先是容量限制，单个Cookie的大小通常被限制在4KB以内，且每个域名下允许存储的Cookie总数也有严格上限，因此它仅适用于存储轻量级数据。其次是安全性考量，由于Cookie随请求自动发送的特性，极易受到跨站脚本攻击的威胁。因此，绝对不建议将密码、身份令牌等敏感信息以明文形式存储其中。

为了进一步提升数据传输的安全性，当网站部署了HTTPS协议时，开发者应当为Cookie添加 secure 属性。带有此属性的Cookie仅允许在加密的HTTPS连接中进行传输，从而有效防止数据在公共网络中被窃听或篡改。此外，结合 HttpOnly 属性可以禁止JavaScript访问特定的Cookie，这也是防御恶意脚本窃取数据的有效手段。

// 通过设置过期时间为过去的时间来删除Cookie
let pastDate = new Date();
pastDate.setTime(pastDate.getTime() - 1);
document.cookie = "theme=; expires=" + pastDate.toUTCString() + "; path=/";

总结与延伸建议

综上所述，利用 document.cookie 进行数据存储是一项基础且实用的前端技能。通过合理设置过期时间和作用路径，开发者可以灵活控制数据的生命周期与访问权限。同时，妥善处理特殊字符的编码与解码，能够避免潜在的数据解析异常。在面对复杂的业务需求时，应当始终将安全性放在首位，避免存储敏感信息，并充分利用安全属性来加固数据传输链路。掌握这些核心要点，将有助于构建更加稳健和安全的Web应用程序。

HTML5cookiedocument_cookie数据存储修改时间：2026-06-15 14:36:15