参考资料

1. HTML DOM获得有下拉列表的表单的ID
2. HTML DOM改变表格边框的宽度
3. HTML DOM 返回image的name
4. HTML DOM 改变image的src
5. HTML DOM获得下拉列表的选项数量
6. HTML DOM 返回一个iframe中的longdesc属性的值
7. HTML DOM 返回文档的最后一次修改时间 实例
8. HTML DOM write() 和 writeln()的不同实例

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)

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。