HTML DOM 返回文档中的所有cookies的名称/值对 实例

HTML DOM Cookies 操作

基本概念

HTML DOM 提供了 document.cookie 属性来获取和设置当前文档的 cookies。

获取所有 Cookies

// 获取当前文档的所有 cookies
var allCookies = document.cookie;

设置 Cookie

// 设置一个 cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

参数说明

• name=value (必需): Cookie 的名称和值

• expires=date (可选): Cookie 的过期时间

• path=path (可选): Cookie 有效的路径

• domain=domain (可选): Cookie 有效的域名

• secure (可选): 仅通过 HTTPS 传输

完整示例

// 设置 cookie
function setCookie(name, value, days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "") + expires + "; path=/";
}

// 获取 cookie
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

// 删除 cookie
function eraseCookie(name) {   
  document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

CSS 扩展

虽然 CSS 不能直接操作 cookies，但可以通过 CSS 根据 cookie 值来改变样式：

// 根据 cookie 值应用不同样式
if(getCookie('theme') === 'dark') {
  document.body.classList.add('dark-theme');
}

对应的 CSS:

body.dark-theme {
  background-color: #333;
  color: #fff;
}

注意事项

1. 每个 cookie 大小限制为 4KB 左右

2. 每个域名下的 cookie 数量有限制(通常 20-50个)

3. 敏感信息不应存储在 cookie 中

4. 现代应用更推荐使用 Web Storage API(localStorage/sessionStorage)