参考资料

1. HTML DOM write() 和 writeln()的不同实例
2. HTML DOM 改变一个包含在iframe中的文档的背景颜色
3. HTML DOM 返回文档中第一个表单的名字
4. HTML DOM获得有下拉列表的表单的ID
5. HTML DOM 返回文档中锚的数目
6. HTML DOM 改变一个iframe的src
7. HTML DOM 返回图像映射的某个区域的shape 实例
8. HTML DOM添加表格行中的单元格

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)