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

HTML怎样设置cookie？

admin
前端开发
2025-06-21
2026

使用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"