js实现操作cookie的常见方法总结【创建、读取、删除】

JS实现操作Cookie的常见方法总结

在Web开发中，Cookie是一种最为常见的Web存储机制，它能够将数据存储在客户端浏览器中，以便于实现多个请求或多个页面间的数据传递或共享。下面是JS实现操作Cookie的常见方法总结，包括创建、读取和删除。

1. 创建Cookie

使用JS创建Cookie时，需要使用document.cookie属性。document.cookie是一个字符串，它是通过等号（“=”）和分号（“;”）来分隔多个名值对的。下面是一个创建Cookie的示例代码：

function setCookie(name, value, days) {
  var date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  var expires = "expires=" + date.toUTCString();
  document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

在上面的代码中，setCookie函数接受三个参数：Cookie的名称、Cookie的值和Cookie的过期时间（以天为单位）。这个函数将Cookie的过期时间设置为从当前日期开始的特定天数之后，然后将Cookie写入文档对象的cookie属性中。

我们可以使用以下代码来调用setCookie函数：

setCookie("username", "John Doe", 7);

上述代码将创建一个名为“username”的Cookie，其值为“John Doe”，并在7天后过期。

2. 读取Cookie

要读取Cookie值，需要遍历document.cookie数组并解析其中的名值对。以下是一个示例函数，可用于读取Cookie值：

function getCookie(name) {
  var cookieName = name + "=";
  var cookies = document.cookie.split(';');
  for(var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(cookieName) === 0) {
      return cookie.substring(cookieName.length, cookie.length);
    }
  }
  return "";
}

在上面的代码中，getCookie函数接受一个Cookie的名称作为参数，并将其与document.cookie数组中的所有Cookie进行比较。对于每个Cookie，该函数使用JavaScript的字符串方法来删除名称值之间的空白字符，并检查该Cookie是否匹配给定的名称。如果找到匹配项，则返回该Cookie的值，否则返回一个空字符串。

以下代码将调用getCookie函数并试图获取名为“username”的Cookie的值：

var username = getCookie("username");

上述代码将返回用户名Cookie的值，如果Cookie不存在，则返回一个空字符串。

3. 删除Cookie

要删除Cookie，可以通过将其过期时间设置为过去的时间来实现。以下是一个示例函数，可用于删除Cookie：

function deleteCookie(name) {
  document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

在上面的代码中，deleteCookie函数接受一个Cookie的名称作为参数，并将其从document.cookie数组中删除。该函数实现的方法是使用Javascript的字符串连接来将Cookie的过期时间设置为1970年1月1日，并将其路径设置为“/”。

以下代码将调用deleteCookie函数并尝试删除名为“username”的Cookie：

deleteCookie("username");

上述代码将删除名为“username”的Cookie。

示例说明

示例一：保存用户喜好的主题色

// 创建Cookie - 设置主题颜色Cookie
function setThemeCookie(color) {
  var date = new Date();
  date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); // 有效期1年
  var expires = "expires=" + date.toUTCString();
  document.cookie = "theme=" + color + ";" + expires + ";path=/";
}

// 读取Cookie - 获取主题颜色Cookie
function getThemeCookie() {
  var cookieName = "theme" + "=";
  var cookies = document.cookie.split(';');
  for(var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(cookieName) === 0) {
      return cookie.substring(cookieName.length, cookie.length);
    }
  }
  return "";
}

// 删除Cookie - 删除主题颜色Cookie
function deleteThemeCookie() {
  document.cookie = "theme=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

// 示例用法
setThemeCookie("red"); // 设置主题颜色为"red"
var theme = getThemeCookie(); // 获取当前主题颜色
console.log(theme); // 输出 "red"
deleteThemeCookie(); // 删除主题颜色Cookie

示例二：保存用户登录状态

// 创建Cookie - 设置用户登录状态Cookie
function setLoginCookie(username) {
  var date = new Date();
  date.setTime(date.getTime() + (60 * 60 * 1000)); // 有效期1小时
  var expires = "expires=" + date.toUTCString();
  document.cookie = "login=" + username + ";" + expires + ";path=/";
}

// 读取Cookie - 获取用户登录状态Cookie
function getLoginCookie() {
  var cookieName = "login" + "=";
  var cookies = document.cookie.split(';');
  for(var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i];
    while (cookie.charAt(0) === ' ') {
      cookie = cookie.substring(1);
    }
    if (cookie.indexOf(cookieName) === 0) {
      return cookie.substring(cookieName.length, cookie.length);
    }
  }
  return "";
}

// 删除Cookie - 删除用户登录状态Cookie
function deleteLoginCookie() {
  document.cookie = "login=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
}

// 示例用法
setLoginCookie("John"); // 设置用户登录状态为"John"
var login = getLoginCookie(); // 获取当前登录状态
console.log(login); // 输出 "John"
deleteLoginCookie(); // 删除用户登录状态Cookie

上述的两个示例演示了如何使用JavaScript实现操作Cookie，分别用于保存用户喜好的主题色和保存用户的登录状态。这些示例可用于各种Web应用程序，以便于存储和管理用户状态和首选项。