In diesem Artikel wird hauptsächlich die Methode zur Implementierung der Warenkorbfunktion mit nativem js + Cookie vorgestellt und die zugehörigen Betriebstechniken von Javascript in Kombination mit der Cookie-Speicherung zur Implementierung der Warenkorbfunktion anhand von Beispielen analysiert dazu
Das Beispiel in diesem Artikel beschreibt die Methode zur Implementierung der Warenkorbfunktion mit nativem js+cookie. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Hier verwenden wir js+cookie, um eine einfache Warenkorbfunktion zu implementieren.
Die erste ist eine einfache HTML-Struktur, nur um die Funktion zu demonstrieren.
Der folgende Code dient dazu, die Produktinformationen zum Cookie hinzuzufügen, wenn auf die Schaltfläche „Hinzufügen“ geklickt wird. Die Kommentare sind detaillierter. Im Code werde ich Cookies bedienen (Set und Get werden als cookieUtil-Objektmethoden gekapselt für einfaches Telefonieren).
Hier ist das gekapselte cookieUtil-Objekt
//cookie Util var cookieUtil = { //添加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; }, //获取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; }, //删除cookie unsetCookie: function (name) { document.cookie = encodeURIComponent(name) + "=; expires=" + new Date(0); } };
Der obige Code ist sehr einfach zu verstehen. Die folgende Seite dient zum Herausnehmen der Produktinformationen im Cookie.
查看购物车页面
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie sensible Textaufforderungen in Angular
So implementieren Sie die versteckte Anzeige in Angular
Wie verschiebt man Bilder in js nach links und rechts?
Wie arbeitet BrowserRouter mit dem React-Router-Server zusammen?
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Warenkorbfunktion mit js+cookie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
