JS中cookie的使用及缺点讲解

2023年5月19日下午6:48 • JavaScript

什么是cookie

Cookie是存储在客户端浏览器中的小数据片段，它会在HTTP请求和服务器响应之间传递数据。Cookie通常用于记录用户的登录状态、页面访问记录、用户偏好等信息。

JS中如何使用cookie

1. 设置cookie

要设置Cookie，可以使用document.cookie属性。例如：

document.cookie = "username=Tom; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";

上面的代码将设置一个名为username，值为Tom的Cookie，并将其有效期设置为2022年12月18日12点整。路径设置为/表示整个网站都可以访问这个Cookie。

2. 获取cookie

获取Cookie的方法是通过访问document.cookie属性来获取当前页面的所有Cookie。例如：

const cookies = document.cookie;
console.log(cookies);

上面的代码将在控制台输出当前页面的所有Cookie信息。

3. 删除cookie

要删除Cookie，只需要将该Cookie的expires属性设为过去的时间即可。例如：

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

上面的代码将删除名为username的Cookie。

cookie的缺点

Cookie虽然在很多场景下非常有用，但是它也有以下一些缺点：

Cookie存储的数据量有限，通常只能存储4KB左右的数据。
Cookie存储在客户端，容易被用户篡改，从而导致安全问题。
因为Cookie被包含在HTTP请求头中，所以对于每一个页面请求都会带上Cookie。如果Cookie数据较大，会导致每个请求的数据量增加，从而降低性能。
Cookie不能跨域使用，也就是说，不同域名下的网页不能共享Cookie。这对于一些需要跨域传递数据的应用场景来说会产生限制。

示例1

在下面的例子中，用户点击一次按钮之后，网站将设置一个名为visited，值为true的Cookie，并将其有效期设置为1个月。当用户再次访问网站的时候，如果Cookie存在，则会提示用户之前访问过该网站。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例1</title>
</head>
<body>
  <button id="btn">访问网站</button>
  <script>
    function setCookie(name, value, expires) {
      const date = new Date();
      date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000);
      document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
    }

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

    const visited = getCookie('visited');
    if (visited === 'true') {
      alert('你之前已经访问过该网站了！');
    }

    document.getElementById('btn').addEventListener('click', function() {
      setCookie('visited', 'true', 30 /* 有效期一个月 */)
    });
  </script>
</body>
</html>

示例2

在下面的例子中，用户可以自定义一个文本框的颜色，并将其保存到Cookie中。每次用户再次访问该网站时，网站都会从Cookie中读取上次保存的颜色，并将文本框的颜色设置为该颜色。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>示例2</title>
</head>
<body>
  <input type="text" id="input" placeholder="在这里输入文本内容">
  <div id="message"></div>
  <script>
    function setCookie(name, value) {
      document.cookie = `${name}=${value};path=/`;
    }

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

    const color = getCookie('color');
    if (color !== '') {
      document.querySelector('#input').style.backgroundColor = color;
    }

    document.querySelector('#input').addEventListener('blur', function() {
      const color = this.value;
      this.style.backgroundColor = color;
      setCookie('color', color);
      document.querySelector('#message').innerHTML = `已成功将文本框的颜色设置为${color}`;
    });
  </script>
</body>
</html>

在上面的例子中，用户可以在输入框中输入任意颜色。当用户重新访问网站时，网站将从Cookie中读取之前保存的颜色，将文本框的颜色设置为该颜色。如果用户没有保存过颜色，则文本框将以默认的白色背景显示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS中cookie的使用及缺点讲解 - Python技术站