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

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

如果您需要在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";

标签： javascript java html js json html5 cookie 浏览器 工具 session saf