使用JavaScript的
document.cookie属性设置Cookie，创建格式为name=value; expires=GMTString; path=/的字符串并赋值，，“javascript，document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";，“在HTML中直接设置Cookie是不可行的,因为HTML是标记语言而非编程语言，实际设置Cookie需要通过JavaScript实现，以下是详细的操作指南：
基础设置方法
通过JavaScript的document.cookie属性实现：
<script>
// 设置基础Cookie（会话级，关闭浏览器失效）
document.cookie = "username=JohnDoe";
// 设置带过期时间的Cookie（30天后失效）
const expiryDate = new Date();
expiryDate.setDate(expiryDate.getDate() + 30);
document.cookie = `theme=dark; expires=${expiryDate.toUTCString()}`;
</script>
关键参数详解
设置Cookie时可附加以下参数：
-
expires
expires=${new Date(2025, 0, 1).toUTCString()}
（设置2025年1月1日过期） -
max-age（优先级高于expires）
max-age=2592000// 30天（单位：秒） -
path
path=/admin// 仅/admin路径可访问
-
domain
domain=.example.com// 作用于所有子域名 -
Secure（仅HTTPS传输）
Secure -
HttpOnly（禁止JavaScript访问）
HttpOnly
完整示例
<script>
document.cookie = `user_token=abc123xyz;
expires=${new Date(Date.now() + 86400000).toUTCString()};
path=/;
domain=.yourwebsite.com;
Secure;
HttpOnly`;
</script>
操作函数封装
// 设置Cookie
function setCookie(name, value, days=30, path="/") {
const expires = new Date();
expires.setTime(expires.getTime() + days*24*60*60*1000);
document.cookie = `${name}=${encodeURIComponent(value)};
expires=${expires.toUTCString()};
path=${path};
Secure`;
}
// 读取Cookie
function getCookie(name) {
return document.cookie
.split('; ')
.find(row => row.startsWith(`${name}=`))
?.split('=')[1];
}
// 示例调用
setCookie("language", "zh-CN", 90);
console.log(getCookie("language")); // 输出"zh-CN"
安全最佳实践
-
敏感数据保护
- 用户身份凭证必须添加
HttpOnly和Secure标志 - 避免存储密码/银行卡号等敏感信息
- 用户身份凭证必须添加
-
同源策略
- Cookie默认仅允许同域名访问
- 跨域需设置
SameSite=None; Secure
-
合规要求
- GDPR/CCPA等法规要求明确告知用户
- 提供Cookie使用声明和禁用选项
浏览器限制
| 属性 | 限制值 |
|---|---|
| 单条Cookie大小 | 通常4KB（不同浏览器有差异） |
| 域名Cookie总数 | 约50-150条 |
| 总存储空间 | 通常3000条左右 |
重要提示：现代网站应优先使用
localStorage或sessionStorage存储非敏感数据，仅会话标识等必要数据使用Cookie。
调试与验证
- 浏览器开发者工具 → Application → Cookies
- 查看Cookie的生效参数和值
- 通过控制台执行
document.cookie查看当前域Cookie
引用说明 参考以下权威来源：
- MDN Web文档 – HTTP Cookies机制（developer.mozilla.org）
- RFC 6265 – HTTP状态管理机制标准（tools.ietf.org）
- OWASP安全指南 – Cookie安全最佳实践（owasp.org）
- Google开发者文档 – 现代Cookie使用策略（developers.google.com）
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/33043.html
