Erstellen eines Warenkorbs mit HTML5-Webspeicher

Mit dem Aufkommen von HTML5 konnten viele Websites JavaScript-Plugins und -Codes durch einfache, effizientere HTML-Codes wie Audio, Video, Geolokalisierung usw. ersetzen. HTML5-Tags erleichterten die Arbeit von Entwicklern erheblich und verbesserten gleichzeitig die Seitenladezeit und die Websiteleistung. Insbesondere der HTML5-Webspeicher war ein Wendepunkt, da er es den Browsern der Benutzer ermöglichte, Benutzerdaten ohne Verwendung eines Servers zu speichern. Die Erstellung von Webspeicher ermöglichte es Front-End-Entwicklern also, mehr auf ihrer Website zu erreichen, ohne serverseitige Codierung oder Datenbank zu kennen oder zu verwenden.

Online-E-Commerce-Websites verwenden überwiegend serverseitige Sprachen wie PHP, um Benutzerdaten zu speichern und sie von einer Seite zur anderen weiterzuleiten. Mit JavaScript-Backend-Frameworks wie Node.js können wir dasselbe Ziel erreichen. In diesem Tutorial zeigen wir Ihnen jedoch Schritt für Schritt, wie Sie einen Einkaufswagen mit HTML5 und etwas kleinerem JavaScript-Code erstellen. Andere Verwendungen der Techniken in diesem Lernprogramm wären das Speichern von Benutzereinstellungen, den bevorzugten Inhalten des Benutzers, Wunschlisten und Benutzereinstellungen wie Name und Passwort auf Websites und nativen mobilen Apps, ohne eine Datenbank zu verwenden.

Viele stark frequentierte Websites verlassen sich auf komplexe Techniken wie Server-Clustering, DNS-Load-Balancer, clientseitiges und serverseitiges Caching, verteilte Datenbanken und Microservices, um Leistung und Verfügbarkeit zu optimieren. Tatsächlich besteht die größte Herausforderung für dynamische Websites darin, Daten aus einer Datenbank abzurufen und eine serverseitige Sprache wie PHP zu verwenden, um sie zu verarbeiten. Die Remote-Datenbankspeicherung sollte jedoch nur für wesentliche Website-Inhalte wie Artikel und Benutzeranmeldeinformationen verwendet werden. Funktionen wie Benutzereinstellungen können ähnlich wie Cookies im Browser des Benutzers gespeichert werden. Ebenso können Sie beim Erstellen einer nativen mobilen App den HTML5-Webspeicher in Verbindung mit einer lokalen Datenbank verwenden, um die Geschwindigkeit Ihrer App zu erhöhen. Daher müssen wir als Front-End-Entwickler Möglichkeiten erkunden, wie wir die Leistungsfähigkeit des HTML5-Webspeichers in unseren Anwendungen in den frühen Phasen der Entwicklung nutzen können.

Ich war Teil eines Teams, das eine groß angelegte soziale Website entwickelt hat, und wir haben HTML5-Webspeicher stark genutzt. Wenn sich beispielsweise ein Benutzer anmeldet, speichern wir die gehashte Benutzer-ID in einer HTML5-Sitzung und verwenden sie, um den Benutzer auf geschützten Seiten zu authentifizieren. Wir verwenden diese Funktion auch, um alle neuen Push-Benachrichtigungen – wie neue Chat-Nachrichten, Website-Nachrichten und neue Feeds – zu speichern und sie von einer Seite zur anderen weiterzuleiten. Wenn eine soziale Website stark frequentiert wird, funktioniert es möglicherweise nicht, sich vollständig auf den Server für den Lastausgleich zu verlassen, sodass Sie Aufgaben und Daten identifizieren müssen, die vom Browser des Benutzers und nicht von Ihren Servern verarbeitet werden können.

Hintergrund des Projekts

Ein Warenkorb ermöglicht es dem Besucher einer Website, Produktseiten anzuzeigen und Artikel in seinen Warenkorb zu legen. Der Besucher kann alle seine Artikel überprüfen und seinen Warenkorb aktualisieren (z. B. um Artikel hinzuzufügen oder zu entfernen). Um dies zu erreichen, muss die Website die Daten des Besuchers speichern und sie von einer Seite zur anderen weitergeben, bis der Besucher zur Kassenseite geht und einen Kauf tätigt. Das Speichern von Daten kann über eine serverseitige oder eine clientseitige Sprache erfolgen. Bei einer serverseitigen Sprache trägt der Server das Gewicht der Datenspeicherung, während bei einer clientseitigen Sprache der Computer des Besuchers (Desktop, Tablet oder Smartphone) die Daten speichert und verarbeitet. Jeder Ansatz hat seine Vor- und Nachteile. In diesem Tutorial konzentrieren wir uns auf einen einfachen clientseitigen Ansatz, der auf HTML5 und JavaScript basiert.

Hinweis : Um diesem Tutorial folgen zu können, sind Grundkenntnisse in HTML5, CSS und JavaScript erforderlich.

Projektdateien

Klicken Sie hier, um die Quelldateien des Projekts herunterzuladen. Sie können auch eine Live-Demo sehen.

Überblick über den HTML5-Webspeicher

Der HTML5-Webspeicher ermöglicht es Webanwendungen, Werte lokal im Browser zu speichern, die die Browsersitzung überleben können, genau wie Cookies. Im Gegensatz zu Cookies, die bei jeder HTTP-Anfrage gesendet werden müssen, werden Webspeicherdaten niemals an den Server übertragen. Daher übertrifft der Webspeicher Cookies in der Webleistung. Darüber hinaus können Sie mit Cookies nur 4 KB Daten pro Domain speichern, während der Webspeicher mindestens 5 MB pro Domain zulässt. Webspeicher funktioniert wie ein einfaches Array, das Schlüssel Werten zuordnet, und es gibt zwei Arten:

• Sitzungsspeicherung
  Dadurch werden Daten in einer Browsersitzung gespeichert, in der sie verfügbar sind, bis der Browser oder Browser-Tab geschlossen wird. Popup-Fenster, die aus demselben Fenster geöffnet werden, können den Sitzungsspeicher anzeigen, ebenso wie Iframes innerhalb desselben Fensters. Mehrere Fenster vom selben Ursprung (URL) können jedoch den Sitzungsspeicher des anderen nicht sehen.
• Lokaler Speicher
  Dadurch werden Daten im Webbrowser ohne Ablaufdatum gespeichert. Die Daten stehen allen Fenstern mit der gleichen Herkunft (Domain) zur Verfügung, auch wenn der Browser oder die Browser-Tabs erneut geöffnet oder geschlossen werden.

Beide Speichertypen werden derzeit von allen gängigen Webbrowsern unterstützt. Beachten Sie, dass Sie Speicherdaten nicht von einem Browser an einen anderen weitergeben können, selbst wenn beide Browser dieselbe Domain besuchen.

Erstellen Sie einen einfachen Einkaufswagen

Um unseren Warenkorb zu erstellen, erstellen wir zunächst eine HTML-Seite mit einem einfachen Warenkorb zum Anzeigen von Artikeln und einem einfachen Formular zum Hinzufügen oder Bearbeiten des Warenkorbs. Dann fügen wir HTML-Webspeicher hinzu, gefolgt von JavaScript-Codierung. Obwohl wir lokale HTML5-Speichertags verwenden, sind alle Schritte mit denen der HTML5-Sitzungsspeicherung identisch und können auf HTML5-Sitzungsspeichertags angewendet werden. Abschließend gehen wir für diejenigen, die an der Verwendung von jQuery interessiert sind, etwas jQuery-Code als Alternative zu JavaScript-Code durch.

Lokalen HTML5-Speicher zum Einkaufswagen hinzufügen

Unsere HTML-Seite ist eine Basisseite, auf der im Kopf auf Tags für externes JavaScript und CSS verwiesen wird.

 <!doctype html> <html lang="en-US"> <head> <title>HTML5 Local Storage Project</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="rating" content="General"> <meta name="expires" content="never"> <meta name="language" content="English, EN"> <meta name="description" content="Shopping cart project with HTML5 and JavaScript"> <meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage"> <meta name="author" content="dcwebmakers.com"> <script src="Storage.js"></script> <link rel="stylesheet" href="StorageStyle.css"> </head>

Unten ist der HTML-Inhalt, der im Hauptteil der Seite erscheint:

 <form name="ShoppingList"> <fieldset> <legend>Shopping cart</legend> <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label> <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete"> </fieldset> <div> <h2>Shopping List</h2> <table></table> <label><input type="button" value="Clear"> * Delete all items</label> </div> </form>

Hinzufügen von JavaScript zum Warenkorb

Wir erstellen und rufen die JavaScript-Funktion doShowAll() im onload() Ereignis auf, um die Browserunterstützung zu prüfen und dynamisch die Tabelle zu erstellen, die das Name-Wert-Paar des Speichers anzeigt.

 <body onload="doShowAll()">

Alternativ können Sie das JavaScript-Onload-Ereignis verwenden, indem Sie dies zum JavaScript-Code hinzufügen:

 window.load=doShowAll();

Oder verwenden Sie dies für jQuery:

 $( window ).load(function() { doShowAll(); });

In der Funktion CheckBrowser() möchten wir prüfen, ob der Browser die Speicherung von HTML5 unterstützt. Beachten Sie, dass dieser Schritt möglicherweise nicht erforderlich ist, da die meisten modernen Webbrowser ihn unterstützen.

 /* =====> Checking browser support. //This step might not be required because most modern browsers do support HTML5. */ //Function below might be redundant. function CheckBrowser() { if ('localStorage' in window && window['localStorage'] !== null) { // We can use localStorage object to store data. return true; } else { return false; } }

Wenn die Funktion CheckBrowser() doShowAll() doShowAll() zuerst die Browserunterstützung auswertet, erstellt sie dynamisch die Tabelle für die Einkaufsliste während des Ladens der Seite. Sie können die Schlüssel (Eigenschaftsnamen) der Schlüssel-Wert-Paare, die im lokalen Speicher gespeichert sind, innerhalb einer JavaScript-Schleife iterieren, wie unten gezeigt. Basierend auf dem Speicherwert füllt diese Methode die Tabelle dynamisch, um das im lokalen Speicher gespeicherte Schlüssel-Wert-Paar anzuzeigen.

 // Dynamically populate the table with shopping list items. //Step below can be done via PHP and AJAX, too. function doShowAll() { if (CheckBrowser()) { var key = ""; var list = "<tr><th>Item</th><th>Value</th></tr>\n"; var i = 0; //For a more advanced feature, you can set a cap on max items in the cart. for (i = 0; i <= localStorage.length-1; i++) { key = localStorage.key(i); list += "<tr><td>" + key + "</td>\n<td>" + localStorage.getItem(key) + "</td></tr>\n"; } //If no item exists in the cart. if (list == "<tr><th>Item</th><th>Value</th></tr>\n") { list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n"; } //Bind the data to HTML table. //You can use jQuery, too. document.getElementById('list').innerHTML = list; } else { alert('Cannot save shopping list as your browser does not support HTML 5'); } }

Hinweis : Entweder Sie oder Ihr Framework haben eine bevorzugte Methode zum Erstellen neuer DOM-Knoten und zum Behandeln von Ereignissen. Um die Dinge klar und fokussiert zu halten, verwendet unser Beispiel .innerHTML und Inline-Event-Handler , obwohl wir dies normalerweise im Produktionscode vermeiden würden.

Tipp: Wenn Sie jQuery zum Binden von Daten verwenden möchten, können Sie einfach document.getElementById('list').innerHTML = list; mit $('#list').html()=list; .

Führen Sie den Warenkorb aus und testen Sie ihn

In den vorherigen zwei Abschnitten haben wir Code zum HTML-Kopf hinzugefügt, und wir haben HTML zum Einkaufswagenformular und Warenkorb hinzugefügt. Wir haben auch eine JavaScript-Funktion erstellt, um die Browserunterstützung zu prüfen und den Warenkorb mit den Artikeln im Warenkorb zu füllen. Beim Füllen der Warenkorbartikel ruft das JavaScript Werte aus dem HTML-Webspeicher statt aus einer Datenbank ab. In diesem Teil zeigen wir Ihnen, wie die Daten in die HTML5-Speicher-Engine eingefügt werden. Das heißt, wir verwenden den lokalen HTML5-Speicher in Verbindung mit JavaScript, um neue Artikel in den Einkaufswagen einzufügen und einen vorhandenen Artikel im Einkaufswagen zu bearbeiten.

Hinweis : Ich habe unten Tipps hinzugefügt, um jQuery-Code als Alternative zu den JavaScript-Codes anzuzeigen.

Wir erstellen ein separates HTML- div -Element, um Benutzereingaben und -übermittlungen zu erfassen. Wir werden die entsprechende JavaScript-Funktion im onClick Ereignis für die Schaltflächen anhängen.

 <input type="button" value="Save"> <input type="button" value="Update"> <input type="button" value="Delete">

Sie können Eigenschaften für das localStorage Objekt ähnlich wie bei einem normalen JavaScript-Objekt festlegen. Hier ist ein Beispiel dafür, wie wir die lokale Speichereigenschaft myProperty auf den Wert myValue :

 localStorage.myProperty="myValue";

Sie können die lokale Speichereigenschaft wie folgt löschen:

 delete localStorage.myProperty;

Alternativ können Sie die folgenden Methoden verwenden, um auf den lokalen Speicher zuzugreifen:

 localStorage.setItem('propertyName','value'); localStorage.getItem('propertyName'); localStorage.removeItem('propertyName');

Um das Schlüssel-Wert-Paar zu speichern, rufen Sie den Wert des entsprechenden JavaScript-Objekts ab und rufen Sie die Methode setItem :

 function SaveItem() { var name = document.forms.ShoppingList.name.value; var data = document.forms.ShoppingList.data.value; localStorage.setItem(name, data); doShowAll(); }

Unten ist die jQuery-Alternative für die SaveItem Funktion. Fügen Sie zunächst eine ID zu den Formulareingaben hinzu:

 <label>Item: <input type="text" name="name"></label> <label>Quantity: <input type="text" name="data"></label>

Wählen Sie dann die Formulareingaben nach ID aus und rufen Sie ihre Werte ab. Wie Sie unten sehen können, ist es viel einfacher als JavaScript:

 function SaveItem() { var name = $("#name").val(); var data = $("#data").val(); localStorage.setItem(name, data); doShowAll(); }

Um einen Artikel im Einkaufswagen zu aktualisieren, müssen Sie zuerst prüfen, ob der Schlüssel dieses Artikels bereits im lokalen Speicher vorhanden ist, und dann seinen Wert aktualisieren, wie unten gezeigt:

 //Change an existing key-value in HTML5 storage. function ModifyItem() { var name1 = document.forms.ShoppingList.name.value; var data1 = document.forms.ShoppingList.data.value; //check if name1 is already exists //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); document.forms.ShoppingList.data.value = localStorage.getItem(name1); } doShowAll(); }

Unten sehen Sie die jQuery-Alternative.

 function ModifyItem() { var name1 = $("#name").val(); var data1 = $("#data").val(); //Check if name already exists. //Check if key exists. if (localStorage.getItem(name1) !=null) { //update localStorage.setItem(name1,data1); var new_info=localStorage.getItem(name1); $("#data").val(new_info); } doShowAll(); }

Wir werden die Methode removeItem verwenden, um ein Element aus dem Speicher zu löschen.

 function RemoveItem() { var name=document.forms.ShoppingList.name.value; document.forms.ShoppingList.data.value=localStorage.removeItem(name); doShowAll(); }

Tipp: Ähnlich wie bei den beiden vorherigen Funktionen können Sie jQuery-Selektoren in der RemoveItem Funktion verwenden.

Es gibt eine andere Methode für den lokalen Speicher, mit der Sie den gesamten lokalen Speicher löschen können. Wir rufen die Funktion ClearAll() im onClick Event des „Clear“-Buttons auf:

 <input type="button" value="Clear">

Wir verwenden die clear -Methode, um den lokalen Speicher zu löschen, wie unten gezeigt:

 function ClearAll() { localStorage.clear(); doShowAll(); }

Sitzungsspeicher

Das sessionStorage Objekt funktioniert genauso wie localStorage . Sie können das obige Beispiel durch das sessionStorage Objekt ersetzen, um die Daten nach einer Sitzung ablaufen zu lassen. Sobald der Benutzer das Browserfenster schließt, wird der Speicher gelöscht. Kurz gesagt, die APIs für localStorage und sessionStorage sind identisch, sodass Sie die folgenden Methoden verwenden können:

• setItem(key, value)
• getItem(key)
• removeItem(key)
• clear()
• key(index)
• length

Einkaufswagen mit Arrays und Objekten

Da der HTML5-Webspeicher nur die Speicherung einzelner Namen und Werte unterstützt, müssen Sie JSON oder eine andere Methode verwenden, um Ihre Arrays oder Objekte in eine einzelne Zeichenfolge zu konvertieren. Möglicherweise benötigen Sie ein Array oder Objekt, wenn Sie eine Kategorie und Unterkategorien von Artikeln haben oder wenn Sie einen Einkaufswagen mit mehreren Daten wie Kundeninformationen, Artikelinformationen usw. haben. Sie müssen nur Ihre Array- oder Objektelemente in eine Zeichenfolge implodieren um sie im Webspeicher zu speichern und sie dann wieder in ein Array aufzulösen (oder aufzuteilen), um sie auf einer anderen Seite anzuzeigen. Lassen Sie uns ein einfaches Beispiel eines Einkaufswagens durchgehen, der drei Informationssätze enthält: Kundeninformationen, Artikelinformationen und benutzerdefinierte Postanschrift. Zuerst verwenden wir JSON.stringify, um das Objekt in einen String umzuwandeln. Dann verwenden wir JSON.parse, um es wieder rückgängig zu machen.

Hinweis : Denken Sie daran, dass der Schlüsselname für jede Domain eindeutig sein sollte.

 //Customer info //You can use array in addition to object. var obj1 = { firstname: "John", lastname: "thomson" }; var cust = JSON.stringify(obj1); //Mailing info var obj2 = { state: "VA", city: "Arlington" }; var mail = JSON.stringify(obj2); //Item info var obj3 = { item: "milk", quantity: 2 }; var basket = JSON.stringify(obj3); //Next, push three strings into key-value of HTML5 storage. //Use JSON parse function below to convert string back into object or array. var New_cust=JSON.parse(cust);

Zusammenfassung

In diesem Tutorial haben wir Schritt für Schritt gelernt, wie man mithilfe von HTML5-Webspeicher und JavaScript einen Warenkorb erstellt. Wir haben gesehen, wie man jQuery als Alternative zu JavaScript verwendet. Wir haben auch JSON-Funktionen wie Stringify und Parse besprochen, um Arrays und Objekte in einem Einkaufswagen zu handhaben. Sie können auf diesem Tutorial aufbauen, indem Sie weitere Funktionen hinzufügen, z. B. das Hinzufügen von Produktkategorien und Unterkategorien, während Daten in einem mehrdimensionalen JavaScript-Array gespeichert werden. Außerdem können Sie den gesamten JavaScript-Code durch jQuery ersetzen.

Wir haben gesehen, welche anderen Dinge Entwickler mit HTML5-Webspeicher erreichen können und welche anderen Funktionen sie ihren Websites hinzufügen können. Sie können dieses Tutorial beispielsweise verwenden, um Benutzereinstellungen, bevorzugte Inhalte, Wunschlisten und Benutzereinstellungen wie Namen und Passwörter auf Websites und nativen mobilen Apps zu speichern, ohne eine Datenbank zu verwenden.

Abschließend noch einige Aspekte, die bei der Implementierung von HTML5-Webspeicher zu berücksichtigen sind:

• Einige Benutzer haben möglicherweise Datenschutzeinstellungen, die verhindern, dass der Browser Daten speichert.
• Einige Benutzer verwenden ihren Browser möglicherweise im Inkognito-Modus.
• Beachten Sie einige Sicherheitsprobleme wie DNS-Spoofing-Angriffe, verzeichnisübergreifende Angriffe und Gefährdung sensibler Daten.

Verwandte Lektüre

• „Browser-Speichergrenzen und Eviction-Kriterien“, MDN-Webdokumentation, Mozilla
• „Web Storage“, HTML Living Standard,
• „Diese Woche in HTML 5“, Der WHATWG-Blog