JavaScript实现cookie的写入、读取、删除功能

当一个web页面被加载到浏览器中时，浏览器会为它分配一个cookie的存储区域。此时，开发者可以通过JavaScript代码来操作cookie的写入、读取和删除等功能。

当一个web页面被加载到浏览器中时，浏览器会为它分配一个cookie的存储区域。此时，开发者可以通过JavaScript代码来操作cookie的写入、读取和删除等功能。

写入cookie

可以使用document.cookie来写入cookie。document.cookie是一个字符串，它存储着当前网页的所有cookie。写入cookie的格式如下：

document.cookie = "key=value; expires=date; path=path; domain=domain; secure";

其中，各项参数的意义如下：

• key: cookie的名称，同一网页对应多个cookie时要注意不要重名。
• value: cookie的值，可以为任意字符串。
• expires: cookie有效期，格式为date，如"Thu, 18 Dec 2022 12:00:00 GMT"，也可以是一个过时的时间，如"-1 day"表示 cookie 会在当前时间的前一天过期。
• path: 可选，表示cookie的作用域，如"/"表示网站的根目录，"/test/"表示网站的test目录。
• domain: 可选，表示cookie可以被发送到哪个域名服务器，如"example.com"。
• secure: 可选，表示cookie只能通过HTTPS协议加密传输，如"; secure"。

下面是一个写入cookie的示例：

// 将名称为"name"，值为"Tom"，有效期为一小时的cookie写入网页
var now = new Date();
var expiredTime = now.getTime() + 60 * 60 * 1000; // 一小时后过期
now.setTime(expiredTime);
document.cookie = "name=Tom; expires=" + now.toUTCString();

读取cookie

当需要读取cookie的值时，可以使用document.cookie来获取当前网页下的cookie值。由于每个cookie都是以分号与空格作为分隔符的字符串，这就要用到JavaScript的字符串处理方法，如split()、substr()、indexOf()等。

下面是一个读取cookie的示例：

// 读取名称为"name"的cookie的值
function getCookie(name) {
  var cookieArr = document.cookie.split("; ");
  for (var i = 0; i < cookieArr.length; i++) {
    var pair = cookieArr[i].split("=");
    if (name == pair[0]) {
      return pair[1];
    }
  }
  return "";
}

console.log(getCookie("name")); // 输出"Tom"

删除cookie

删除cookie要注意的是，不能直接删除cookie，需要借助写入cookie时的参数来共同删除，包括name、value、expires、path、domain。如下面的示例所示：

// 删除名称为"name"的cookie
function deleteCookie(name) {
  var now = new Date();
  now.setTime(now.getTime() - 1);
  var cval = getCookie(name);
  if (cval != "") {
    document.cookie =
      name + "=" + cval + "; expires=" + now.toUTCString() + "; path=/";
  }
}

deleteCookie("name");
console.log(getCookie("name")); // 输出""

通过上述三个步骤，即可轻松地完成JavaScript实现cookie的写入、读取和删除等功能。