JavaScript实现cookie的操作-前端开发

下面是详细讲解 JavaScript 实现 Cookie 操作的攻略。

下面是详细讲解 JavaScript 实现 Cookie 操作的攻略。

什么是 Cookie

Cookie（中文翻译为“网页 Cookie”或者“浏览器 Cookie”）是网站为了辨别用户身份的一种标识，是存在用户本地终端上的数据。Cookie 是小型文本文件，由网站服务器发送给用户浏览器，浏览器会将其存储在本地，之后每次请求该网站时都会携带该 Cookie 信息，方便服务器进行区分识别。

JavaScript 操作 Cookie

获取 Cookie

可以通过 Document.cookie 属性获取当前网站设置的所有 Cookie。示例如下：

// 获取 Cookie 的方法
function getCookie(name) {
  let cookies = document.cookie.split("; ");
  for (let i = 0; i < cookies.length; i++) {
    let [cookieKey, cookieValue] = cookies[i].split("=");
    if (cookieKey === name) {
      // 解码 cookie 值
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
}

// 例：获取 Cookie 名称为 "username" 的值
let username = getCookie("username");

设置 Cookie

调用 Document.cookie 属性可设置新的 Cookie。设置过程需要指定 Cookie 名称、Cookie 值、过期时间、路径等参数。示例如下：

// 设置 Cookie 的方法
function setCookie(name, value, expires, path) {
  let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
  if (expires) {
    let date = new Date();
    date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000);
    cookieText += `; expires=${date.toGMTString()}`;
  }
  if (path) {
    cookieText += `; path=${path}`;
  }
  document.cookie = cookieText;
}

// 例：设置 Cookie，保存用户登录信息一周
setCookie("username", "JohnDoe", 7, "/");

删除 Cookie

通过设置 Cookie 的过期时间为过去的时间，即可实现删除 Cookie。示例如下：

// 删除 Cookie 的方法
function deleteCookie(name) {
  setCookie(name, "", -1);
}

// 例：删除 Cookie 名称为 "username" 的 Cookie
deleteCookie("username");

示例说明

以下是两个对于操作 Cookie 的具体示例，供参考。

示例一：记住用户选择语言

假设现在有一个多语言的网站，用户可以通过下拉菜单选择自己喜欢的语言。网站需要记录用户的选择，以便下次用户访问时可以直接使用对应的语言，避免用户多次选择的麻烦。

当用户选择语言时，可通过设置 Cookie 保存其选择。下次用户访问网站时，可以通过读取该 Cookie 的值，自动设定对应的语言。示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Language Selection Demo</title>
  </head>
  <body>
    <select id="languageSelect">
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>

    <script>
      let languageSelect = document.querySelector("#languageSelect");
      let selectedLang = getCookie("lang");
      if (selectedLang) {
        languageSelect.value = selectedLang;
      }

      languageSelect.addEventListener("change", function () {
        let lang = this.value;
        setCookie("lang", lang, 7, "/");
        // 设置语言后，跳转到首页
        window.location.href = "/index.html";
      });
    </script>
  </body>
</html>

示例二：实现一个购物车

假设现在有一个网上商城，用户可以在其中添加自己喜欢的商品到购物车，最后一次性购买并结算。考虑实现一个购物车的功能，为每个用户记录所选商品及数量，下次访问时可以直接恢复用户所选内容。

当用户点击商品的“加入购物车”按钮时，可通过设置 Cookie 保存商品信息。对应的，当用户访问购物车页面时，可以通过读取该 Cookie 的值，自动显示用户所选内容。示例如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Shopping Cart Demo</title>
  </head>
  <body>
    <h2>商品列表</h2>
    <ul>
      <li>
        <span>商品 A - 价格：99 元</span>
        <button class="add-button" data-id="A">加入购物车</button>
      </li>
      <li>
        <span>商品 B - 价格：199 元</span>
        <button class="add-button" data-id="B">加入购物车</button>
      </li>
      <li>
        <span>商品 C - 价格：299 元</span>
        <button class="add-button" data-id="C">加入购物车</button>
      </li>
    </ul>
    <h2>购物车</h2>
    <ul id="cartList"></ul>

    <script>
      let addButtonList = document.querySelectorAll(".add-button");
      let cartList = document.querySelector("#cartList");
      addButtonList.forEach(function (button) {
        button.addEventListener("click", function () {
          let productId = this.dataset.id;
          let productAmount = getCookie(`product-${productId}`) || 0;
          productAmount = parseInt(productAmount) + 1;
          setCookie(`product-${productId}`, productAmount, 7, "/");
          refreshCartList();
        });
      });

      function refreshCartList() {
        cartList.innerHTML = "";
        let totalAmount = 0;
        let cookies = document.cookie.split("; ");
        for (let i = 0; i < cookies.length; i++) {
          let [cookieKey, cookieValue] = cookies[i].split("=");
          if (cookieKey.startsWith("product-")) {
            let productId = cookieKey.slice(8);
            let productName = `商品 ${productId}`;
            let productPrice = 99 * productId;
            let productAmount = parseInt(cookieValue);
            let productTotalPrice = productPrice * productAmount;
            let li = `
              <li>
                ${productName}：单价 ${productPrice} 元，数量 ${productAmount} 条，总价 ${productTotalPrice} 元
              </li>
            `;
            cartList.insertAdjacentHTML("beforeend", li);
            totalAmount += productTotalPrice;
          }
        }
        let li = `
          <li>
            总价：${totalAmount} 元
          </li>
        `;
        cartList.insertAdjacentHTML("beforeend", li);
      }

      refreshCartList();
    </script>
  </body>
</html>

以上是针对 JavaScript 实现 Cookie 操作的详细介绍及两个具体示例。