document.cookie用于JavaScript操作Cookie，需按格式设置键值对及属性；读取时解析分号分隔字符串；删除需设过期时间为过去并匹配原path/domain；可封装set/get/del函数提升复用性。
如果您需要在HTML5网页中通过JavaScript使用document.cookie API存取简单数据，则需了解其基本语法和限制。以下是具体操作步骤：
一、设置Cookie
设置Cookie是通过为document.cookie赋值字符串实现的，该字符串必须包含键值对及可选属性（如过期时间、路径、域名等）。浏览器会自动将该字符串解析并存储为Cookie。
1、在标签内或外部JS文件中，使用document.cookie = “key=value”格式赋值。
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”;
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在整站范围内有效，如需限定范围应按实际路径调整
五、注意事项与限制
document.cookie存在多项固有约束，开发者必须明确其行为边界，避免因误解导致功能异常或安全风险。
1、单个Cookie最大容量为4KB，超出部分将被截断，不可存储大量数据或JSON对象（建议先序列化再检查长度）
2、同源策略下，子域名可共享父域Cookie（如a.example.com可读写.example.com设置的Cookie），但需显式指定domain=”.example.com”
3、Cookie默认随每次HTTP请求自动发送至服务器，敏感信息（如token）务必配合Secure和HttpOnly使用，防止XSS窃取
4、现代浏览器对第三方Cookie限制日趋严格，跨站场景下document.cookie可能返回空字符串或抛出异常
5、Safari和Firefox默认阻止非用户交互触发的Cookie写入（如页面加载时自动设置），需确保操作由click等事件触发
以上就是html5怎么使用cookie_HT5用document.cookie读写cookie存简单数据【使用】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606901.html
微信扫一扫 
支付宝扫一扫 
