参考资料

1. HTML DOM 返回一个区域的href属性的querystring部分 实例
2. HTML DOM 修改 HTML 内容
3. HTML DOM改变下拉列表中被选中的选项的文本
4. HTML DOM 根节点
5. HTML DOM 提交表单
6. HTML DOM 访问
7. HTML DOM 设置image的hspace和vspace属性
8. HTML DOM 返回图像映射的某个区域的hostname实例

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)