JS 新增Cookie 取cookie值 删除cookie 举例详解

JS 新增 Cookie

在 JavaScript 中新增 Cookie 非常简单，只需要设置 document.cookie 属性即可。

document.cookie = "key=value";

其中，key 表示 Cookie 的键值，value 表示 Cookie 的值。如果需要设置多个 Cookie，可以使用分号(;)隔开。

document.cookie = "key1=value1;key2=value2;key3=value3";

取 Cookie 值

通过 JavaScript 取 Cookie 值需要使用 document.cookie 属性获取。

const cookie = document.cookie;

console.log(cookie); // 输出 cookie 的所有键值对

如果需要获取某个 Cookie 值，需要进行字符串分割。

function getCookie(key) {
  const cookie = document.cookie;

  const cookieArr = cookie.split('; ');

  for (let i = 0; i < cookieArr.length; i++) {
    const cookiePair = cookieArr[i].split('=');
    if (key === cookiePair[0]) {
      return cookiePair[1];
    }
  }

  return null;
}

console.log(getCookie('name')); // 输出 Cookie 中键为 name 的值

删除 Cookie

删除 Cookie 就是将过期时间设置成过去的时间，使其失效。

function deleteCookie(key) {
  const date = new Date();
  date.setTime(date.getTime() - 1);

  const value = getCookie(key);
  if (value) {
    document.cookie = `${key}=${value};expires=${date.toGMTString()}`;
  }
}

deleteCookie('name'); // 删除 Cookie 中键为 name 的 Cookie

示例说明

示例 1：设置和读取 Cookie

document.cookie = "name=小明";
document.cookie = "age=20";
document.cookie = "gender=男";

const name = getCookie('name');
const age = getCookie('age');
const gender = getCookie('gender');

console.log(`姓名：${name}, 年龄：${age}, 性别：${gender}`);

上述代码中设置了三个 Cookie，在取 Cookie 值时使用了 getCookie 函数获取，最后会在控制台输出：

姓名：小明, 年龄：20, 性别：男

示例 2：删除 Cookie

document.cookie = "name=小明";
document.cookie = "age=20";
document.cookie = "gender=男";

deleteCookie('name');

const name = getCookie('name'); // 'name' 对应的 Cookie 已被删除，返回 null
const age = getCookie('age');
const gender = getCookie('gender');

console.log(`姓名：${name}, 年龄：${age}, 性别：${gender}`);

上述代码中，首先设置了三个 Cookie，然后通过 deleteCookie 函数删除了 name 对应的 Cookie，在取 Cookie 值时无法获取 name 对应的 Cookie 值，返回 null，最后输出结果为：

姓名：null, 年龄：20, 性别：男