当前位置：首页 > 前端开发 > 正文

HTML怎样设置cookie？

使用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时可附加以下参数：

  1. expires
    expires=${new Date(2025, 0, 1).toUTCString()}
    （设置2025年1月1日过期）

  2. max-age（优先级高于expires）
    max-age=2592000 // 30天（单位：秒）

    HTML怎样设置cookie？ 第1张

  3. path
    path=/admin // 仅/admin路径可访问

  4. domain
    domain=.example.com // 作用于所有子域名

  5. Secure（仅HTTPS传输）
    Secure

    HTML怎样设置cookie？ 第2张

  6. 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"

安全最佳实践

  1. 敏感数据保护

    • 用户身份凭证必须添加HttpOnly和Secure标志
    • 避免存储密码/银行卡号等敏感信息

  2. 同源策略

    HTML怎样设置cookie？ 第3张

    • Cookie默认仅允许同域名访问
    • 跨域需设置SameSite=None; Secure

  3. 合规要求

    • GDPR/CCPA等法规要求明确告知用户
    • 提供Cookie使用声明和禁用选项

浏览器限制

属性 限制值
单条Cookie大小 通常4KB（不同浏览器有差异）
域名Cookie总数 约50-150条
总存储空间 通常3000条左右

重要提示：现代网站应优先使用localStorage或sessionStorage存储非敏感数据，仅会话标识等必要数据使用Cookie。

调试与验证

  1. 浏览器开发者工具 → Application → Cookies
  2. 查看Cookie的生效参数和值
  3. 通过控制台执行document.cookie查看当前域Cookie

引用说明 参考以下权威来源：

  1. MDN Web文档 – HTTP Cookies机制（developer.mozilla.org）
  2. RFC 6265 – HTTP状态管理机制标准（tools.ietf.org）
  3. OWASP安全指南 – Cookie安全最佳实践（owasp.org）
  4. Google开发者文档 – 现代Cookie使用策略（developers.google.com）
0

相关文章