JavaScript Cookie

最新推荐文章于 2025-04-24 08:30:00 发布

大哥的打嗝

最新推荐文章于 2025-04-24 08:30:00 发布

阅读量544

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/weixin_47477471/article/details/129218941

版权

JavaScript 专栏收录该内容

72 篇文章

订阅专栏

JavaScript Cookie是一种存储在浏览器中的小型文本文件，用于在网站和用户之间传递数据。Cookie通常由网站生成并存储在用户计算机的浏览器中，以便在用户下次访问该网站时检索信息。

在本文中，我们将深入探讨JavaScript Cookie的工作原理、作用以及在实际工作中的用途。

JavaScript Cookie的工作原理

在JavaScript中，我们可以使用document.cookie来创建、读取、修改和删除Cookie。Cookie由键值对组成，每个键值对之间使用分号和空格进行分隔。

下面是一个创建Cookie的示例代码：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

在上面的代码中，我们使用了document.cookie来创建了一个名为“username”的Cookie，并将其设置为“John Doe”。该Cookie的过期时间设置为2025年12月18日，并且路径设置为根目录。

为了访问Cookie，我们可以使用以下代码：

var username = getCookie("username");

function getCookie(name) {
  var cookieArr = document.cookie.split("; ");
  for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0]) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

在上面的代码中，我们首先使用document.cookie获取Cookie字符串，然后将其拆分为键值对数组。接下来，我们遍历数组并比较每个键名，以找到所需的Cookie。如果找到，则返回该Cookie的值。

为了修改Cookie，我们可以使用以下代码：

document.cookie = "username=Jane Smith; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

在上面的代码中，我们将名为“username”的Cookie的值修改为“Jane Smith”。

最后，如果要删除Cookie，我们可以将其过期时间设置为过去的时间：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

在上面的代码中，我们将名为“username”的Cookie的过期时间设置为1970年1月1日，这样浏览器会自动将其删除。

JavaScript Cookie的作用

JavaScript Cookie在Web开发中有许多用途。以下是一些常见的用途：

记住用户偏好设置

Web应用程序可以使用Cookie来存储用户的偏好设置，例如语言、主题、字体大小等。这样，当用户下次访问应用程序时，应用程序可以自动应用他们的偏好设置。

跟踪用户会话

Web应用程序可以使用Cookie来跟踪用户会话。

设置 Cookie

要设置 Cookie，我们可以使用以下代码：

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

其中，key 是 Cookie 名称，value 是 Cookie 值，expires 是 Cookie 过期时间，path 是 Cookie 作用路径，domain 是 Cookie 作用域名，secure 表示 Cookie 只能通过 HTTPS 协议传输。

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

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

在上面的示例中，我们设置了一个名为 username 的 Cookie，值为 John Doe，过期时间为 Thu, 18 Dec 2023 12:00:00 UTC，作用路径为根目录 /。

读取 Cookie

要读取 Cookie，我们可以使用以下代码：

var cookies = document.cookie;

以上代码将返回一个包含所有 Cookie 的字符串。我们可以使用 JavaScript 字符串的方法来处理这个字符串。例如，我们可以使用 split() 方法将 Cookie 字符串分割成单独的 Cookie。以下是一个读取 Cookie 的示例：

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

var username = getCookie('username');
console.log('Username: ' + username);

在上面的示例中，我们定义了一个 getCookie() 函数来读取 Cookie。该函数接受一个 Cookie 名称作为参数，并返回该 Cookie 的值。在函数内部，我们首先使用 split() 方法将 Cookie 字符串分割成单独的 Cookie，然后使用 trim() 方法去掉每个 Cookie 的首尾空格。接下来，我们使用 indexOf() 方法找到指定名称的 Cookie，并使用 substring() 方法获取该 Cookie 的值。最后，如果未找到指定名称的 Cookie，则返回空字符串。

删除 Cookie

要删除 Cookie，我们可以使用以下代码：

document.cookie = "key=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";

其中，key 是要删除的 Cookie 名称。我们将过期时间设置为 Thu, 01 Jan 1970 00:00:00 UTC，表示该 Cookie 已经过期。最后，我们设置 Cookie 的作用路径为根目录 /。

以下是一个删除 Cookie 的示例：

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

deleteCookie('username');

Cookie的优点：

跨页面数据传递：Cookie的作用不仅仅是存储数据，而是可以在同一域名下的不同页面之间共享数据。
保存用户状态：Cookie可以保存用户的登录状态和一些用户偏好设置，方便用户下次访问时不需要重新输入登录信息或者偏好设置。
降低服务器负载：将一些经常使用的数据存储在Cookie中，可以减少服务器的数据请求次数，从而降低服务器的负载。
提高网站性能：Cookie可以缓存一些数据，避免每次访问都需要重新获取数据，从而提高网站的访问速度和性能。
跨域名共享数据：可以通过设置Cookie的域名和路径，实现跨域名共享数据，方便数据的共享和传递。
保持用户会话：可以通过Cookie来保持用户会话，使用户在访问网站时，可以从上一次访问的地方继续访问，而不需要重新从首页开始访问。

Cookie的缺点：

存在安全问题：Cookie中存储的数据可能会被恶意攻击者获取，从而导致用户信息泄露的风险。
存储空间有限：每个Cookie的存储空间有限制，不能存储过多的数据，否则会影响网站的性能。
不支持跨线程访问：Cookie只能在同一线程下访问，不能跨线程访问，因此需要注意线程安全问题。
不能永久保存数据：Cookie可以设置过期时间，但是无法永久保存数据，因此需要定期清理过期的Cookie，否则会占用大量的存储空间。
受浏览器限制：Cookie的存储数量和大小受浏览器的限制，不同浏览器的限制不同，因此需要在开发过程中进行测试和优化。

总结：

Cookie作为一种在浏览器端存储数据的方式，具有其独特的优点和缺点，需要根据具体的业务场景进行选择和使用。在实际开发中，需要注意Cookie的安全问题和存储空间问题，以及与服务器端的配合使用，才能更好地发挥其作用，提高网站的性能和用户体验。