js nativo+Análisis del método de implementación de la función de carrito de compras con cookie

Este ejemplo describe el js nativo+La implementación de cookie para la función del carrito de compras. Comparto con todos para que puedan referirse a ella, como se muestra a continuación:

Aquí se utiliza js+La implementación de cookie realiza una función simple de carrito de compras.

Primero es una estructura HTML simple, solo para demostrar la función.

<ul>
  <li><span>a0001</span><span>shdfi</span><span>￥98.00</span>
<input type="button" value="Añadir al carrito"></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span>
<input type="button" value="Añadir al carrito"></li>
  <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span>
<input type="button" value="Añadir al carrito"></li>
  <li><span>a0004</span><span>sssi</span><span>￥998.00</span>
<input type="button" value="Añadir al carrito"></li>
  <li><span>a0005</span><span>yyu</span><span>￥98.00</span>
<input type="button" value="Añadir al carrito"></li>
  <li><span>a0006</span><span>sheri</span><span>￥598.00</span>
<input type="button" value="Añadir al carrito"></li>
  <li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span>
<input type="button" value="Añadir al carrito"></li>
  <li><span>sbnm,</span><span>￥698.00</span><input type="button" value="Añadir
añadir_al_carrito"></li>
</ul>
<a href="carrito_de_compras_ver_pagina.html" rel="external nofollow" >Ver carrito de compras</a>}

El siguiente código es para agregar información del producto al cookie al hacer clic en el botón de agregar, los comentarios son bastante detallados. En el código, he encapsulado las operaciones de cookie (set y get) como métodos del objeto cookieUtil para facilitar su llamada.

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //Determinar si existe el cookie o es la primera vez que se agrega
      var arr = cookieUtil.getCookie("car") &63; 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //Recorrer y agregar eventos de clic a cada elemento input
      for (var j = 0; j < input.length; j++) {
        input[j].onclick = function () {
          var g_id = this.parentNode.children[0].innerHTML;
          var g_name = this.parentNode.children[1].innerHTML;
          var g_price = this.parentNode.children[2].innerHTML;
          //Recorrer el cookie para determinar si el producto ya existe
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //El producto ya existe, cantidad de productos+1
              arr[i].num++;
              break;//Finalizar el bucle inmediatamente
            }
          }
          //Si el valor de i es igual a la longitud de arr, entonces se demuestra que el bucle se ha completado sin entrar en la condición if
          //El producto no existe en el cookie, crear un nuevo objeto de producto y agregarlo al array
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //Serializar el array actualizado como una cadena de JSON y guardarlo en el cookie
          var date = new Date();
          date.setDate(date.getDate()); + 10); //guardar durante diez días
  //guardar cookie
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

Este es el objeto cookieUtil encapsulado aquí

//Utilidad de cookie
var cookieUtil = {
  //Agregar cookie
  setCookie: function (name, value, vencimiento) {
    var cookieText = encodeURIComponent(name); + "=" + 
encodeURIComponent(value);
    if (vencimiento && vencimiento instanceof Date) {
      cookieText += "; vencimiento=" + vencimiento;
    }
    // if (dominio) {
    //   cookieText += "; dominio=" + dominio;
    // }
    document.cookie = cookieText;
  },
  //Obtener cookie
  getCookie: function (name) {
    var cookieText = decodeURIComponent(document.cookie);
    var cookieArr = cookieText.split("; ");
    for (var i = 0; i < cookieArr.length; i++) {
      var arr = cookieArr[i].split("=");
      if (arr[0] == name) {
        return arr[1];
      }
    }
    return null;
  },
  //Eliminar cookie
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name); + "=; expires=" + 
new Date(0);
  }
};

El código anterior es muy fácil de entender, a continuación esta página es extraer la información de los productos del cookie.

!DOCTYPE html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ver la página de la cesta de la compra</title>
  <script src="../Utils.js"></script>
  <script>
    onload = function () {
      var ul = document.getElementsByTagName("ul")[0];
      var arr = cookieUtil.getCookie("car");
      if (arr) {
        arr = JSON.parse(arr);
        //Si existe la cookie, se extrae y se muestra en la página
        for (var i = 0; i < arr.length; i++) {
          //Cada elemento del array corresponde a un objeto de producto
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "Nombre del producto:" + goods.g_name + "，número de productos"
cantidad" + goods.num + "，precio unitario de producto:" + goods.g_price;
          ul.appendChild(li);
        }
      } else {
        alert("¡No existen productos en el carrito de compras!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

Los lectores interesados en más contenido relacionado con JavaScript pueden ver la sección especial de este sitio: 'Resumen de estructuras de datos y técnicas de algoritmos de JavaScript', 'Resumen de técnicas de recorridos y algoritmos de JavaScript', 'Resumen de técnicas de búsqueda de JavaScript', 'Resumen de efectos de animación y técnicas de JavaScript', 'Resumen de técnicas de depuración y errores de JavaScript' y 'Resumen de técnicas de operaciones matemáticas de JavaScript'.

Espero que lo descrito en este artículo pueda ayudar a todos a diseñar programas de JavaScript.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.