js nativo+Análise do método de implementação da função do carrinho de compras com cookie

Este exemplo demonstra js+método de implementação de função de carrinho de compras usando cookie. Compartilho com todos para referência, conforme abaixo:

Aqui usamos js+cookie implementa uma função simples de carrinho de compras.

Primeiro é uma estrutura simples de HTML, apenas para demonstrar a funcionalidade.

<ul>
  <li><span>a0001</span><span>shdfi</span><span>R$98.00</span>
<input type="button" value="adicionar ao carrinho"></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>R$698.00</span>
<input type="button" value="adicionar ao carrinho"></li>
  <li><span>a0003</span><span>dfdfi</span><span>R$988.00</span>
<input type="button" value="adicionar ao carrinho"></li>
  <li><span>a0004</span><span>sssi</span><span>R$998.00</span>
<input type="button" value="adicionar ao carrinho"></li>
  <li><span>a0005</span><span>yyu</span><span>R$98.00</span>
<input type="button" value="adicionar ao carrinho"></li>
  <li><span>a0006</span><span>sheri</span><span>R$598.00</span>
<input type="button" value="adicionar ao carrinho"></li>
  <li><span>a0007</span><span>dsfcdhdfi</span><span>R$498.00</span>
<input type="button" value="adicionar ao carrinho"></li>
  <li><span>sbnm,</span><span>R$698.00</span><input type="button" value="adicionar
adicionar ao carrinho"></li>
</ul>
<a href="购物车查看页面.html" rel="external nofollow" >verificar carrinho de compras</a>

O código abaixo é para adicionar informações do produto ao cookie ao clicar no botão de adição, os comentários são detalhados, no código, encapsulei as operações de cookie (set e get) como métodos do objeto cookieUtil para facilitar a chamada.

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //verificar se existe cookie ou se é a primeira adição
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //percorrer para adicionar eventos de clique 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;
          //percorrer o cookie para verificar se já existe esse produto
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //já existe esse produto, quantidade do produto+1
              arr[i].num++;
              break;//acabe imediatamente a iteração
            }
          }
          //se o valor de i for igual ao comprimento do arr, então a iteração terminou e não entrou no if condition
          //o cookie não contém esse produto, crie um novo objeto de produto e adicione-o ao 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 o array atualizado como uma string JSON e salvá-la no cookie
          var date = new Date();
          date.setDate(date.getDate()); + 10); //salvar por dez dias
  //salvar cookie
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

Este é o objeto cookieUtil encapsulado

//Utilitário de cookie
var cookieUtil = {
  //Adicionar cookie
  setCookie: function (name, value, expires) {
    var cookieText = encodeURIComponent(name); + "=" + 
encodeURIComponent(value);
    if (data_expiração && data_expiração instanceof Date) {
      cookieText += "; data_expiração=" + data_expiração;
    }
    // if (domínio) {
    //   cookieText += "; domínio=" + domínio;
    // }
    document.cookie = cookieText;
  },
  //Obter 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;
  },
  //Deletar cookie
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name); + "=; expires=" + 
new Date(0);
  }
};

O código acima é muito fácil de entender, a seguir está a página que pega as informações dos produtos do cookie.

!DOCTYPE html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ver a página do carrinho de compras</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);
        //Existem cookies, então os pega e exibe na página
        for (var i = 0; i < arr.length; i++) {
          //Cada elemento do array corresponde a um objeto de produto
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "Numele produsului:" + goods.g_name + "，numărul de produse"
cantitate" + goods.num + "，prețul unitar al produsului:" + goods.g_price;
          ul.appendChild(li);
        }
      } else {
        alert("Acesta nu există produse în coșul de cumpărături!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

Leitores interessados em mais conteúdo sobre JavaScript podem consultar as seções especiais do site: 'Resumo de Estruturas de Dados e Técnicas de Algoritmos em JavaScript', 'Resumo de Técnicas de Traversia e Algoritmos em JavaScript', 'Resumo de Técnicas de Busca em JavaScript', 'Resumo de Efeitos de Animação e Técnicas em JavaScript', 'Resumo de Técnicas de Erro e Depuração em JavaScript' e 'Resumo de Uso de Operações Matemáticas em JavaScript'

Espero que o conteúdo deste artigo ajude a todos a projetar programas JavaScript.

Declaração: O conteúdo deste artigo é extraído da Internet, pertence ao autor original, é contribuído e carregado voluntariamente pelos usuários da Internet, o site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade legal relevante. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Caso seja confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)