正文

掌握JS存入cookie的小技巧，轻松设置有效期，案例详解助你一臂之力！

/0 浏览量
0525

在Web开发中，cookie是一种常用的数据存储方式，可以用来保存用户的登录状态、偏好设置等信息。JavaScript提供了丰富的API来操作cookie，以下是一些小技巧，帮助你轻松设置cookie的有效期，并通过案例进行详细讲解。

1. 设置cookie的基本语法

首先，我们需要了解设置cookie的基本语法：

document.cookie = "name=value; expires=Thu, 21 Dec 2023 00:00:00 GMT; path=/";

这里，name是cookie的名称，value是cookie的值，expires是cookie的过期时间，path是cookie的有效路径。

2. 设置cookie的有效期

要设置cookie的有效期，我们可以在expires参数中指定一个特定的日期。以下是一个示例：

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=/";
}

setCookie("username", "JohnDoe", 7); // 设置cookie名为"username"，值为"JohnDoe"，有效期7天

在这个例子中，我们定义了一个setCookie函数，它接受三个参数：cookie的名称、值和有效期（以天为单位）。函数内部，我们首先创建了一个expires变量，然后根据传入的days参数计算过期时间，并将其转换为UTC字符串。最后，我们将计算出的过期时间添加到cookie字符串中。

3. 获取cookie的值

要获取cookie的值，我们可以使用document.cookie属性，并通过字符串操作来提取所需的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;
}

var username = getCookie("username"); // 获取cookie名为"username"的值
console.log(username); // 输出"JohnDoe"

在这个例子中，我们定义了一个getCookie函数，它接受一个参数：cookie的名称。函数内部，我们首先将document.cookie属性分割成数组，然后遍历数组中的每个cookie，并检查其名称是否与传入的名称匹配。如果找到匹配的cookie，我们就返回其值；如果没有找到，就返回null。

4. 删除cookie

要删除cookie，我们可以设置其过期时间为当前时间。以下是一个示例：

function deleteCookie(name) {
  document.cookie = name + "=; Max-Age=-99999999;";
}

deleteCookie("username"); // 删除cookie名为"username"的cookie

在这个例子中，我们定义了一个deleteCookie函数，它接受一个参数：cookie的名称。函数内部，我们设置了cookie的值为空，并将Max-Age属性设置为负数，这样浏览器就会立即删除该cookie。

总结

通过以上技巧，你可以轻松地在JavaScript中设置、获取和删除cookie，并设置cookie的有效期。希望这些案例能够帮助你更好地理解和应用cookie操作。

-- 展开阅读全文 --