JavaScript操作Cookie指南

小蓝 • 2024-11-18 01:59 • 编程

一、设置Cookie

设置cookie是Web开发中基本的功能之一，可以用来存储用户的信息，如登录状态、语言选择等等。

在JavaScript中，通过document.cookie实现设置cookie，同时支持设置cookie的属性和选项。

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()方法接收3个参数：cookie名，cookie值和cookie的过期时间（单位为天）。expires通过将其置为空字符串或提供天数来在一段时间后使cookie过期。path参数指定cookie所属的路径。

下面的示例演示如何设置一个名为username的cookie，过期时间为7天：

setCookie("username", "JohnDoe", 7);

二、获取Cookie

获取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;
}

上述代码中，getCookie()方法接收一个参数：cookie的名称。该方法首先将cookie字符串（通过document.cookie获取）拆分为多个cookie，然后遍历所有cookie，通过cookie名称查找目标cookie，并返回其值。如果未找到指定cookie，则返回null。

下面的示例演示如何获取名为username的cookie：

var username = getCookie("username");

三、删除Cookie

删除cookie是指将保存在客户端计算机上的cookie删除。可以根据需要定期删除cookie以提高Web应用程序的安全性。

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

上述代码中，eraseCookie()方法接收一个cookie的名称。该方法设置expires选项来使cookie立即过期，并从浏览器中删除它。

下面的示例演示如何删除名为username的cookie：

eraseCookie("username");

四、更改Cookie

更改cookie的值与设置cookie的方式类似。唯一的区别是设置cookie时需要更新cookie的值而不是创建一个新cookie。

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

上述代码中，updateCookie()方法与setCookie()方法类似，不同之处在于如果存在指定名称的cookie，则更新其值而不是创建一个新cookie。

下面的示例演示如何更新名为username的cookie：

updateCookie("username", "JaneDoe", 7);

五、Cookie选项

可以在JavaScript中设置cookie的选项以提高cookie的安全性和可靠性。

secure：设置为true时，表示该cookie只能通过HTTPS安全连接传输
HttpOnly：将cookie标记为HTTP-only，表示它只能通过HTTP或HTTPS连接访问，从而保护cookie免受恶意脚本的攻击。
SameSite：在浏览器向同站点发送请求时，只会在匹配域中包含请求的cookie。

下面的示例演示如何设置一个安全的和HTTP-only的cookie：

document.cookie = 'my_cookie_name=my_cookie_value;secure;HttpOnly';

六、总结

本文对JavaScript操作cookie进行了全面的介绍，包括设置、获取、删除和更改cookie，以及设置cookie的选项。希望这篇文章对您有所帮助。如果您有任何疑问或建议，请在下面的评论中提出。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/156919.html