JS Cookie存取

JS Cookie存取

什么是Cookie

Cookie 是一种存储在用户计算机上的小文件，用于存储网站的一些用户数据。它由服务器发送给浏览器，并在浏览器的本地存储中保存。每当用户访问同一个网站时，浏览器将会携带相应的 Cookie 信息发送给服务器。

Cookie 通常用于记录用户的登录状态、个性化设置等。通过读取 Cookie 的信息，网站可以向用户展示定制的内容和提供特定的功能。

Cookie 的组成

一个 Cookie 由名字、值、过期时间、路径和域名等组成。

• 名字和值：设置 Cookie 的名称和对应的值，可以是任意的字符串。
• 过期时间：设置 Cookie 的有效期，如果不设置，Cookie 将在浏览器关闭时自动删除。过期时间可以是一个具体的日期或时间，也可以是一个相对的时间间隔。
• 路径：设置 Cookie 的作用路径，默认为当前页面的路径。只有在匹配路径的页面才能访问 Cookie。
• 域名：设置 Cookie 的作用域，默认为当前网站的域名。只有在同一个域名下的网页才能访问 Cookie。

Cookie 的使用

设置 Cookie

在 JavaScript 中可以通过 document 对象的 cookie 属性来设置 Cookie。

document.cookie = "name=value; expires=Sat, 20 Mar 2022 12:00:00 GMT; path=/";

以上代码将设置一个名为 name 的 Cookie，值为 value。它的过期时间被设置为 2022 年 3 月 20 日 12 点整，作用路径为整个网站。

读取 Cookie

可以通过 document 对象的 cookie 属性来读取当前网页的所有 Cookie。

let allCookies = document.cookie;
console.log(allCookies);

以上代码将输出当前网页的所有 Cookie。

获取指定的 Cookie 值

由于 document.cookie 的返回值是一个字符串，其中包含了所有的 Cookie 信息。我们可以根据需要提取其中的特定 Cookie 值。

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

let value = getCookie('name');
console.log(value);

以上代码定义了一个 getCookie 函数，用来获取指定名称的 Cookie 值。在实例中，我们获取了名为 name 的 Cookie 的值，并输出到控制台。

删除 Cookie

要删除一个 Cookie，只需要将其过期时间设置为一个过去的时间即可。

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

以上代码删除了名为 name 的 Cookie。

Cookie 的限制

Cookie 有一些限制，需要我们在使用时注意。

数量限制

每个域名下的 Cookie 数量是有限制的，不同浏览器对于这个限制的具体值有所不同。通常来说，单个域名下的 Cookie 数量限制在几十个到几百个。

大小限制

每个 Cookie 的大小也是有限制的，不同浏览器对于每个 Cookie 的大小限制也有所不同。一般而言，单个 Cookie 的大小限制在 4KB 到 10KB 之间。

安全问题

由于 Cookie 是存在用户计算机上的，所以它的安全性存在一定风险。恶意的网站可以利用 Cookie 来获取用户的敏感信息，如登录凭证等。因此，在使用 Cookie 时需要注意保护用户的隐私和安全。

示例代码

设置 Cookie

document.cookie = "name=value; expires=Sat, 20 Mar 2022 12:00:00 GMT; path=/";

此代码将设置一个名为 name 的 Cookie，值为 value。它将在 2022 年 3 月 20 日 12 点整过期，并在整个网站范围内有效。

读取 Cookie

let allCookies = document.cookie;
console.log(allCookies);

此代码将输出当前网页的所有 Cookie。

获取指定的 Cookie 值

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

let value = getCookie('name');
console.log(value);

此代码定义了一个 getCookie 函数，用来获取指定名称的 Cookie 的值。在实例中，我们获取了名为 name 的 Cookie 的值，并输出到控制台。

删除 Cookie

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

此代码将删除名为 name 的 Cookie。

结论

Cookie 是一种常用的网页数据存储方式，用来记录用户的状态和个性化设置等。通过 JavaScript，我们可以方便地设置、读取和删除 Cookie。然而，由于 Cookie 的限制，我们在使用时需要注意数量和大小的限制，以及保护用户的隐私和安全。