Analisi del metodo per implementare la funzione carrello con JavaScript nativo e cookie

Testo principale

Questo articolo illustra il metodo di implementazione della funzione carrello utilizzando js+cookie. Condivido questo con tutti voi per riferimento, come segue:

Qui si utilizza js+cookie per realizzare una funzione carrello semplice.

Il primo è una struttura HTML semplice, solo per dimostrare la funzione.
  <ul>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0001</span><span>shdfi</span><span>￥98.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0004</span><span>sssi</span><span>￥998.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0005</span><span>yyu</span><span>￥98.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0006</span><span>sheri</span><span>￥598.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>sbnm,</span><span>￥698.00</span><input type="button" value="Aggiungi"></li>
Aggiungi al carrello"></li>
</ul>
<a href="pagina_visualizzazione_carrello.html" rel="external nofollow" >Visualizza carrello</a>

Il seguente codice realizza l'aggiunta delle informazioni del prodotto al cookie quando si clicca sul pulsante Aggiungi, i commenti sono piuttosto dettagliati. Nell'articolo, ho encapsulato le operazioni del cookie (set e get) come metodi dell'oggetto cookieUtil per facilitare la chiamata.

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //Verifica l'esistenza del cookie o se è la prima volta che viene aggiunto
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //Aggiungi un evento di click a ciascun 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;
          //Esamina il cookie per vedere se esiste già il prodotto
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //Esiste già il prodotto, aggiungi 1 al numero di prodotti
              arr[i].num++;
              break;//termina immediatamente la scansione
            }
          }
          //Se il valore di i è uguale alla lunghezza di arr, allora la scansione è terminata e non è entrato nella condizione if
          //Se il cookie non contiene il prodotto, crea un nuovo oggetto prodotto e aggiungilo all'array
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //serializza l'array aggiornato in una stringa JSON e salvala nel cookie
          var date = new Date();
          date.setDate(date.getDate() + 10); //salva per dieci giorni
  //salva cookie
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

Questo è l'oggetto cookieUtil encapsulato

//cookie Util
var cookieUtil = {
  //aggiungi cookie
  setCookie: function (name, value, expires) {}}
    var cookieText = encodeURIComponent(name) + "=" + 
encodeURIComponent(value);
    if (expires && expires instanceof Date) {
      cookieText += "; expires=" + expires;
    }
    // if (domain) {
    //   cookieText += "; domain=" + domain;
    // }
    document.cookie = cookieText;
  },
  //Ottieni 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;
  },
  //Elimina cookie
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name) + "=; expires=" + 
new Date(0);
  }
};

Il codice sopra è molto facile da comprendere, sotto questa pagina si trova l'estrazione delle informazioni di prodotto dal cookie.

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Visualizza pagina carrello</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);
        //Se esiste un cookie, lo estrae e lo visualizza nella pagina
        for (var i = 0; i < arr.length; i++) {
          //Ogni elemento dell'array corrisponde a un oggetto prodotto
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "Nome del prodotto：" + goods.g_name + "，quantità
quantità" + goods.num + "，prezzo unitario del prodotto：" + goods.g_price;
          ul.appendChild(li);
        }
      else {
        alert("Carrello non contiene prodotti!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Corso di base