参考资料

1. HTML DOM document.write() 方法
2. HTML DOM 事件
3. HTML DOM 返回和设置链接的charset属性实例
4. HTML DOM 返回一个表单target属性的值
5. HTML DOM添加表格行中的单元格
6. HTML DOM 用指定的Name弹出元素的数量实例
7. HTML DOM一个行的innerHTML
8. HTML DOM 导航节点关系

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)