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 操作的详细介绍及两个具体示例。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现cookie的操作 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 详细聊聊JS中不一样的深拷贝

    下面我将详细讲解JS中不一样的深拷贝的完整攻略。 什么是深拷贝 深拷贝是指将一个对象完整复制一份并生成一个新对象,新对象和旧对象互不影响,即使新对象被修改了,旧对象也不会发生改变。 JavaScript 中的深拷贝 在 JavaScript 中,拷贝对象的方法是 Object.assign() 或者使用扩展运算符 …。然而,这些拷贝方法都只能进行浅拷贝。…

    JavaScript 2023年6月10日
    00
  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    针对“vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法”的完整攻略,我们可以采用以下步骤进行实现: 1. 使用Scroll Behavior vue-router提供了一个非常好用的配置项scrollBehavior,它可以在页面切换时实现滚动条自动滚动到页面顶部。只需要在创建VueRouter实例时,添加如下代码即可: const ro…

    JavaScript 2023年6月11日
    00
  • js日历功能对象

    关于JS日历功能对象的详细讲解,请看下面的攻略。 什么是JS日历功能对象 JS日历功能对象是一个封装了日历相关功能的JavaScript对象,其中包括了生成日历的HTML、获取当前日期、切换月份、选择日期、设置默认日期等功能,极大地方便了Web页面中使用日历的开发。 JS日历功能对象的基本使用方法 以下将以一个名为calendar的日历对象为例,详细讲解JS…

    JavaScript 2023年6月10日
    00
  • js正则表达式中的单行模式与多行模式实例分析

    下面是一个详细讲解“js正则表达式中的单行模式与多行模式实例分析”的完整攻略: 概述 正则表达式是匹配字符串的强有力的工具,它可以方便的实现各种复杂的匹配需求。而其中的单行模式与多行模式也是正则表达式中非常重要的一部分,能够帮助我们更快捷地进行字符串匹配操作。 在 JavaScript 中,我们可以使用以下方式开启单行模式和多行模式: 单行模式:使用 /s …

    JavaScript 2023年6月10日
    00
  • JavaScript高级程序设计 扩展–关于动态原型

    关于JavaScript高级程序设计中的扩展——动态原型,我来详细解释一下。 动态原型 JavaScript 是一门基于原型继承的语言,原型链决定了对象如何继承属性和方法。原型是 JavaScript 对象中一个非常重要的概念,用于实现对象的继承,从而节省大量的代码。 动态原型模式是一种在同时使用构造函数和原型的情况下,可以向原型中添加方法的方法。如下所示:…

    JavaScript 2023年5月27日
    00
  • JavaScript邮件附件可能携带恶意代码

    下面是详细讲解“JavaScript邮件附件可能携带恶意代码”的完整攻略。 背景 在安全领域中,“恶意邮件”这一术语用于指代包含恶意软件或链接的电子邮件。恶意邮件经常伪装成看上去很合法的邮件,以诱使接收者打开附件或者点开链接,从而导致计算机感染病毒、盗窃敏感信息等危害。 最近,安全专家发现一种以 JavaScript 编写的恶意代码,可以通过邮件附件的形式传…

    JavaScript 2023年5月27日
    00
  • javascript生成大小写字母

    要生成大小写字母,可以借助JavaScript提供的字符集和Math对象中的随机数函数来实现。下面是详细的攻略步骤: 1. 定义大小写字母的字符集 JavaScript中的字符集可以用字符串表示,可以定义大小写字母的字符集如下: const lowercase = "abcdefghijklmnopqrstuvwxyz"; const u…

    JavaScript 2023年5月19日
    00
  • JavaScript 对象新增方法defineProperty与keys的使用说明

    JavaScript 对象新增方法 defineProperty 与 keys 的使用说明 1. defineProperty方法 defineProperty方法是 JavaScript 对象中新增的方法,适用于控制对象属性添加或修改操作。 语法:Object.defineProperty(object, propertyname, descriptor)…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部