native js+Analyse der Methode zur Implementierung der Warenkorbfunktion mit Cookies

Dieser Artikel beschreibt ein Beispiel mit Original js+Methode zur Realisierung der Einkaufswagenfunktion mit Cookie. Hiermit teile ich es mit Ihnen zur Referenz, wie folgt:

Hier wird js verwendet+Cookie realisiert eine einfache Einkaufswagenfunktion.

Zunächst eine einfache HTML-Struktur, nur zur Demonstration der Funktion.

<ul>
  <li><span>a0001</span><span>shdfi</span><span>￥98.00</span>
<input type="button" value="In den Einkaufswagen hinzufügen"></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span>
<input type="button" value="In den Einkaufswagen hinzufügen"></li>
  <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span>
<input type="button" value="In den Einkaufswagen hinzufügen"></li>
  <li><span>a0004</span><span>sssi</span><span>￥998.00</span>
<input type="button" value="In den Einkaufswagen hinzufügen"></li>
  <li><span>a0005</span><span>yyu</span><span>￥98.00</span>
<input type="button" value="In den Einkaufswagen hinzufügen"></li>
  <li><span>a0006</span><span>sheri</span><span>￥598.00</span>
<input type="button" value="In den Einkaufswagen hinzufügen"></li>
  <li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span>
<input type="button" value="In den Einkaufswagen hinzufügen"></li>
  <li><span>sbnm,</span>/span><span>￥698.00</span><input type="button" value="Hinzufügen
in den Einkaufswagen"></li>
</ul>
<a href="购物车查看页面.html" rel="external nofollow">Ansicht des Einkaufswagens</a>

Der folgende Code fügt dem Cookie Informationen zu einem Produkt hinzu, wenn auf die Schaltfläche "Hinzufügen" geklickt wird. Die Kommentare sind detailliert. In diesem Code habe ich die Operationen auf den Cookie (set und get) als Methoden des cookieUtil-Objekts verpackt, um eine einfache Aufrufmöglichkeit zu bieten.

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //Prüfen Sie, ob ein Cookie existiert oder ob es sich um die erste hinzugefügte Aktion handelt
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //Durchsuchen Sie und fügen Sie jedem input-Element einen Klick-Event hinzu
      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;
          //Durchsuchen Sie den Cookie, um zu prüfen, ob das Produkt bereits existiert
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //Das Produkt existiert bereits, Anzahl der Produkte+1
              arr[i].num++;
              break;//Beenden Sie das Durchlaufen sofort
            }
          }
          //Wenn der Wert von i mit der Länge von arr gleich ist, bedeutet das, dass das Durchlaufen beendet ist und die if-Bedingung nie erfüllt wurde,
          //Das Produkt existiert nicht im Cookie, erstellen Sie ein neues Produktobjekt und fügen Sie es zur Liste hinzu
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //Serialisieren Sie das aktualisierte Array in ein JSON-String und speichern Sie es im Cookie ab
          var date = new Date();
          date.setDate(date.getDate()); + 10); //Speichern Sie ihn für zehn Tage
  //Speichern Sie den Cookie
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

Dies ist der gekapselte cookieUtil-Objekt

//Cookie Util
var cookieUtil = {
  //Cookie hinzufügen
  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;
  },
  //Cookie abrufen
  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;
  },
  //Cookie löschen
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name); + "=; expires=" + 
new Date(0);
  }
};

Die obige Codezeile ist sehr leicht zu verstehen, die folgende Seite extrahiert die Produktinformationen aus dem Cookie.

!DOCTYPE html
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ansicht der Einkaufswagen-Seite</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);
        //Besteht ein Cookie, dann wird es abgerufen und auf der Seite angezeigt
        for (var i = 0; i < arr.length; i++) {
          //Jeder Array-Element entspricht einem Produktobjekt
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "Produktname: " + goods.g_name + "Artikelnummer: "
Stück" + goods.num + "Preis: " + goods.g_price;
          ul.appendChild(li);
        }
      } else {
        alert("Es gibt noch keine Artikel im Einkaufswagen!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

Interessierte Leser, die mehr über JavaScript erfahren möchten, können die Themen auf dieser Website überprüfen: "JavaScript Datenstrukturen und Algorithmen Techniken zusammenfassung", "JavaScript Durchsuchungsalgorithmen und Techniken zusammenfassung", "JavaScript Suchalgorithmen Techniken zusammenfassung", "JavaScript Animationseffekte und Techniken zusammenfassung", "JavaScript Fehler und Debugging Techniken zusammenfassung" sowie "JavaScript Mathematikoperationen Verwendung zusammenfassung".

Ich hoffe, dass die in diesem Artikel beschriebenen Informationen Ihnen bei der JavaScript-Programmgestaltung helfen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrechtsinhaber. Der Inhalt wurde von Internetbenutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Die Website übernimmt keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte entdecken, die möglicherweise ein Urheberrechtsverletzungsproblem darstellen, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail zur Meldung von Missbrauch und stellen Sie relevante Beweise zur Verfügung. Sobald überprüft, wird die Website den fraglichen Inhalt sofort löschen, der eine Urheberrechtsverletzung darstellt.)