js设置cookie过期及清除浏览器对应名称的cookie

如何设置Cookie过期时间

Cookie是用来存储一些数据的，在某些情况下，我们希望对存储的cookie设置过期时间，来更好地实现一些功能。下面是利用JS设置cookie过期时间的方法：

1. 利用JS设置cookie

document.cookie = "cookieName=cookieValue;expires=Thu, 18 Dec 2022 12:00:00 GMT; path=/"; 

上面的代码中，我们设置了cookie名称为cookieName，cookie值为cookieValue，过期时间为2022年12月18日12点，过期时间使用GMT格式，path是cookie的有效路径。

1. 设置cookie过期时间

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

上面的代码中，我们利用了Date对象获取当前时间，并且利用setTime()方法获取了过期时间。然后使用toUTCString()方法将过期时间转换为UTC时间格式，最后设置expires为转换后的时间字符串，利用document.cookie设置cookie名称为city，值也为city，并设置过期时间。

如何清除浏览器对应名称的Cookie

设置过期时间能有效防止cookie长时间存在浏览器中，但是有些时候我们需要清除掉某个特定的cookie。下面是利用JS清除浏览器对应名称的cookie的方法：

function clearCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) {
    document.cookie = name + "=" + cval + ";expires=" + exp.toUTCString();
  }
}

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

上面代码中的clearCookie函数接收cookie名称作为参数。该函数获取cookie的值，判断该值是否为null，然后将exp设置为当前日期的前一天的时间，最后重写cookie，并将过期时间设置为exp。

示例1：添加一个30天的cookie

var date = new Date();
date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30天
var expires = "expires=" + date.toUTCString();
document.cookie = "username=John Doe;" + expires + "; path=/";

上面的代码中，我们进行了如下操作：

1. 创建一个名为username的cookie，值为John Doe。
2. 计算出30天后的日期，并将其转换为UTS时间格式。
3. 设置expires属性为计算出的时间，并设置cookie的有效路径为根目录。

示例2：清除名为username的cookie

function clearCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) {
    document.cookie = name + "=" + cval + ";expires=" + exp.toUTCString();
  }
}

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

clearCookie('username');

上面的代码中，我们先定义了clearCookie和getCookie两个函数。然后在clearCookie函数中调用getCookie函数以获取cookie的值。最后使用toUTCString()方法将过期时间设置为当前时间减去1毫秒，清除这个cookie。