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多线程解决方案Web Worker简单说明与实例演示

    Web Worker是一个可以让JavaScript在浏览器上跑多个进程的方案,它可以让JavaScript不阻塞UI线程,大大提高网页的性能和用户体验。Web Worker是HTML5标准里的一部分,目前主流的现代浏览器都支持Web Worker。 Web Worker的基础知识 什么是Web Worker? Web Worker是一种JavaScript…

    JavaScript 2023年5月28日
    00
  • JavaScript进阶教程(第三课)第2/2页

    关于JavaScript进阶教程(第三课)第2/2页的完整攻略,我来给你一个详细的说明。 JavaScript进阶教程(第三课)第2/2页攻略 概述 这篇文章主要介绍了JavaScript中的一些高级概念和技巧,包括函数柯里化、惰性函数、递归等等。针对每一种技巧,都有详细的说明和示例,帮助读者更好地理解和掌握这些概念和技巧。 函数柯里化 函数柯里化是一种将多…

    JavaScript 2023年5月18日
    00
  • 小程序页面间传参的五种方式实例详解

    下面就为你详细讲解“小程序页面间传参的五种方式实例详解”的完整攻略。 一、背景 小程序开发中,需要在不同页面间传递参数,以便实现不同页面间的数据交互,并在目标页面中通过这些参数做出相应的操作。下面,我们就来看一下小程序页面间传参的五种方式实例详解。 二、方式一:query参数传递 query参数传递是小程序页面间传参数最常用的方式。通过传递query参数,目…

    JavaScript 2023年6月11日
    00
  • JS读取XML文件示例代码

    下面是JS读取XML文件的完整攻略。 一、读取XML文件的基本原理 在JS读取XML文件时,可以通过以下步骤实现: 创建一个 XMLHttpRequest对象; 打开文件并发送请求; 监听请求状态; 接收响应; 解析XML数据。 在以上步骤中,创建XMLHttpRequest对象和打开文件并发送请求的方法是固定的,而解析XML数据则需要使用不同的方法,这取决…

    JavaScript 2023年5月27日
    00
  • 使用layui前端框架弹出form表单以及提交的示例

    下面就给你讲解一下使用layui前端框架弹出form表单以及提交的完整攻略。 首先,我们需要在页面中引入layui的CSS和JS文件,并且调用layui的模块: <!– 引入layui –> <link rel="stylesheet" href="../layui/css/layui.css"&…

    JavaScript 2023年6月10日
    00
  • JS简单实现DIV相对于浏览器固定位置不变的方法

    下面是JS简单实现DIV相对于浏览器固定位置不变的方法的完整攻略: 步骤一:设置CSS样式 首先,我们需要在HTML页面中定义一个div,然后为该div设置CSS样式,使其固定在浏览器的某个位置。例如,我们可以设置该div的position属性为”fixed”,然后指定它距离浏览器顶部的距离为0px,即可使之固定在浏览器顶部。 HTML代码如下: <d…

    JavaScript 2023年6月10日
    00
  • javascript实现回到顶部特效

    当页面内容比较长时,用户需要不断地向下滚动页面才能浏览全部内容,但有时候用户想快速回到页面顶部,此时,通过JavaScript实现回到顶部特效便能提高用户的使用体验。 下面是“JavaScript实现回到顶部特效”的完整攻略。 一、获取页面滚动高度 使用window.scrollY属性或window.pageYOffset属性可以获取文档当前的纵向滚动距离。…

    JavaScript 2023年6月11日
    00
  • JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)

    【JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)】 本篇笔记主要介绍ECMAScript中的其他运算符,包括位运算符、三元操作符以及删除操作符等。 位运算符 位运算符是一种针对二进制数的运算,可以操作二进制数的每一位。在JavaScript中,共有6种位运算符: 按位非(~):按位取反运算符,将每一位二进制数的1换成0,…

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