在节点中设置 cookie - Javascript

在网站开发过程中，为了存储一些临时性的数据，我们常常会使用 cookie。cookie 本质上就是一小段文本，存储在用户的客户端上，通过浏览器发送到服务器。在 JavaScript 中，可以通过设置 document.cookie 属性来创建、读取、修改和删除 cookie。

创建 Cookie

JavaScript 创建 cookie 的方式非常简单，只需要设置 document.cookie 即可。

document.cookie = "name=value";

上述代码可以创建一个名为 name，值为 value 的 cookie。不过，创建 cookie 时需要注意一些问题：

1. cookie 值不能包含特殊字符（如 ;, ,, 空格等），这些字符需要被编码。
2. cookie 的过期时间需要手动设置，否则默认是浏览器关闭后即清除。
3. cookie 可以设置路径和域名，以控制其所属的页面范围。

综上所述，下面这段代码可以创建一个名为 name，值为 value，过期时间为一天后，路径为根路径的 cookie：

document.cookie = "name=" + encodeURIComponent("value") + "; expires=" + new Date(Date.now() + 86400000).toUTCString() + "; path=/";

其中：

• encodeURIComponent() 用于对特殊字符进行编码。
• Date.now() + 86400000 表示一天后的时间戳。
• toUTCString() 方法用于将时间数字转换为时间字符串。

读取 Cookie

读取 cookie 的方式也非常简单，只需要获取 document.cookie 属性即可。

let cookies = document.cookie;

上述代码会返回一个字符串，包含当前页面下存在的所有 cookie。如果需要读取某一个 cookie，可以使用正则表达式匹配出对应的值。

function getCookie(name) {
  let reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  let match = document.cookie.match(reg);
  if (match) {
    return decodeURIComponent(match[2]);
  } else {
    return null;
  }
}

上述函数接收一个参数 name，表示需要读取的 cookie 名称。函数中使用正则表达式匹配对应的 cookie 值，并返回解码后的字符串。

需要注意的是，在解码 cookie 值时，需要使用 decodeURIComponent() 方法解码。

修改和删除 Cookie

修改 cookie 值或删除 cookie 都是通过设置过期时间为过去的时间来实现的。

修改 cookie 值：

document.cookie = "name=newValue; expires=" + new Date(Date.now() + 86400000).toUTCString() + "; path=/";

删除 cookie：

document.cookie = "name=; expires=" + new Date(0).toUTCString() + "; path=/";

上述代码中，将过期时间设置为当前时间之前，即表示已经过期，浏览器会自动删除该 cookie。

总结

JavaScript 中操作 cookie 的方式非常简单，只需要设置 document.cookie 属性即可。需要注意的是，在设置、读取、修改和删除 cookie 时需要注意编码和解码的问题以及过期时间的设置。