html5怎么使用cookie_HT5用document.cookie读写cookie存简单数据【使用】-html教程-PHP中文网

html5怎么使用cookie_HT5用document.cookie读写cookie存简单数据【使用】

星夢妙者

发布： 2025-12-21 20:59:02

原创

379人浏览过

document.cookie用于JavaScript操作Cookie，需按格式设置键值对及属性；读取时解析分号分隔字符串；删除需设过期时间为过去并匹配原path/domain；可封装set/get/del函数提升复用性。

html5怎么使用cookie_ht5用document.cookie读写cookie存简单数据【使用】

如果您需要在HTML5网页中通过JavaScript使用document.cookie API存取简单数据，则需了解其基本语法和限制。以下是具体操作步骤：

一、设置Cookie

设置Cookie是通过为document.cookie赋值字符串实现的，该字符串必须包含键值对及可选属性（如过期时间、路径、域名等）。浏览器会自动将该字符串解析并存储为Cookie。

1、在<script>标签内或外部JS文件中，使用document.cookie = "key=value"格式赋值。</script>

2、若需设置有效期，添加expires属性，例如：document.cookie = "username=John; expires=Fri, 31 Dec 2027 23:59:59 GMT";

立即学习“前端免费学习笔记（深入）”；

3、若需限定作用路径，添加path属性，例如：document.cookie = "theme=dark; path=/settings/";

4、若需仅通过HTTPS传输，添加Secure属性：document.cookie = "session_id=abc123; Secure";

5、若需禁止JavaScript访问以增强安全性，添加HttpOnly属性（注意：此属性无法通过document.cookie设置，必须由服务器响应头Set-Cookie提供）。

二、读取Cookie

读取Cookie是通过访问document.cookie获取一个分号分隔的字符串，其中包含当前域下所有可访问的Cookie键值对（不包含expires、path等属性）。需手动解析该字符串提取目标值。

1、执行var cookies = document.cookie; 获取原始字符串，例如："username=John; theme=dark; lang=zh"

2、使用split("; ")将字符串拆分为数组：var cookieArray = cookies.split("; ");

3、遍历数组，对每个元素使用split("=")分离键与值：var pair = cookieArray[i].split("=");

4、使用trim()去除键名前后空格，并比对目标键名：if (pair[0].trim() === "username") { var value = pair[1]; }

5、注意：document.cookie不返回HttpOnly Cookie，也无法读取已过期或路径不匹配的Cookie

三、删除Cookie

删除Cookie的本质是将目标Cookie的过期时间设为过去的时间点，使浏览器立即丢弃它。必须确保路径（path）和域名（domain）与原设置一致，否则可能无法覆盖。

1、构造删除语句：document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

音疯

音疯是昆仑万维推出的一个AI音乐创作平台，每日可以免费生成6首歌曲。

178

查看详情

2、若原Cookie设置了path="/admin/"，则删除时必须显式指定相同路径：document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/admin/";

3、若原Cookie设置了domain=".example.com"，删除时也需包含domain属性：document.cookie = "user_id=; expires=Thu, 01 Jan 1970 00:00:00 GMT; domain=.example.com";

4、删除操作不能省略等号右侧的值，即使为空字符串也必须保留

四、封装基础Cookie操作函数

为避免重复编写解析逻辑，可定义简易工具函数统一处理读、写、删操作，提升代码可维护性与复用性。

1、定义setCookie函数：function setCookie(name, value, days) { const d = new Date(); d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); const expires = "expires=" + d.toUTCString(); document.cookie = name + "=" + value + ";" + expires + "; path=/"; }

2、定义getCookie函数：function getCookie(name) { const cookies = document.cookie.split("; "); for (let i = 0; i

3、定义deleteCookie函数：function deleteCookie(name) { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; }

4、调用示例：setCookie("cart_count", "5", 7); console.log(getCookie("cart_count")); deleteCookie("cart_count");

5、所有函数中path="/"确保Cookie在整站范围内有效，如需限定范围应按实际路径调整