JavaScript操作Cookie（设置、读取、删除）方法详解

什么是Cookie

Cookie是一种存储在用户浏览器中的小文本文件，它包含网站的服务器发给浏览器的信息，可以用来识别已经访问过该网站的用户。因为Cookie是纯文本格式并且只存储少量信息，所以它们不会对系统性能产生太大影响。

设置Cookie

通过JavaScript可以轻松地设置Cookie。以下是设置Cookie的方法：

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

• name：cookie名称
• value：cookie值
• expires：cookie的失效时间，以GMT格式的字符串表示。如果未设置失效时间，cookie将在关闭浏览器时自动删除。
• path：限制目录，指定与cookie关联的Web页面。如果未设置路径，则cookie将适用于所有页面。
• domain：指定与cookie关联的主机。如果未设置域，cookie将适用于发出cookie请求的主机。
• secure：指定是否使用HTTPS协议来传输cookie。

以下是一个设置cookie的示例：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2022 12:00:00 GMT; domain=mydomain.com; path=/; secure";

在此示例中，我们在mydomain.com域名下设置了一个名为username的cookie，它的值为John Doe，并将在指定日期过期。

读取Cookie

读取Cookie的方式非常简单。以下是JavaScript根据cookie名称获取cookie值的方法：

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

此代码将解密cookie值并将其作为数组返回，以方便检查每个cookie的名称。

以下是一个示例，演示如何使用上述函数读取cookie：

var usernameCookie = getCookie("username");
if (usernameCookie != "") {
  alert("Welcome, " + usernameCookie);
} else {
  alert("Sorry, the cookie is not found!");
}

在此示例中，我们检查名为username的cookie值是否存在。如果存在，我们将欢迎消息和username值显示给用户。

删除Cookie

删除cookie也非常简单。以下是JavaScript删除cookie的方法：

function deleteCookie(name) {
  document.cookie = name +'=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

此代码将设置cookie的过期时间为过去的一个时间，因此浏览器将删除该cookie。

以下是一个示例，演示如何使用上述函数删除cookie：

deleteCookie('username');

在此示例中，我们删除了名为username的cookie。

结论

本文介绍了JavaScript操作Cookie的三个方法：设置，读取和删除。在您的Web应用程序中使用Cookie，可以保存用户偏好设置，浏览器偏好设置，身份验证信息等用户相关信息以实现可持续化体验。