Tworzenie koszyka na zakupy z przechowywaniem w sieci HTML5

Wraz z pojawieniem się HTML5 wiele witryn było w stanie zastąpić wtyczki i kody JavaScript prostymi, bardziej wydajnymi kodami HTML, takimi jak audio, wideo, geolokalizacja itp. Tagi HTML5 znacznie ułatwiły pracę programistom, jednocześnie skracając czas ładowania strony i wydajność witryny. W szczególności przechowywanie danych w sieci HTML5 zmieniło zasady gry, ponieważ umożliwia przeglądarkom użytkowników przechowywanie danych użytkownika bez korzystania z serwera. Tak więc stworzenie magazynu internetowego pozwoliło programistom front-end osiągnąć więcej na swojej stronie internetowej bez znajomości lub korzystania z kodowania po stronie serwera lub bazy danych.

Witryny handlu elektronicznego online w większości używają języków po stronie serwera, takich jak PHP, do przechowywania danych użytkowników i przekazywania ich z jednej strony na drugą. Korzystając z back-endowych frameworków JavaScript, takich jak Node.js, możemy osiągnąć ten sam cel. Jednak w tym samouczku pokażemy Ci krok po kroku, jak zbudować koszyk na zakupy za pomocą HTML5 i niewielkiego kodu JavaScript. Inne zastosowania technik przedstawionych w tym samouczku to przechowywanie preferencji użytkownika, ulubionych treści użytkownika, list życzeń i ustawień użytkownika, takich jak nazwa i hasło na stronach internetowych i natywnych aplikacjach mobilnych bez korzystania z bazy danych.

Wiele witryn o dużym natężeniu ruchu polega na złożonych technikach, takich jak klastrowanie serwerów, systemy równoważenia obciążenia DNS, buforowanie po stronie klienta i serwera, rozproszone bazy danych i mikrousługi w celu optymalizacji wydajności i dostępności. Rzeczywiście, głównym wyzwaniem dla dynamicznych witryn internetowych jest pobieranie danych z bazy danych i używanie do ich przetwarzania języka po stronie serwera, takiego jak PHP. Jednak zdalne przechowywanie bazy danych powinno być używane tylko w przypadku istotnej zawartości witryny internetowej, takiej jak artykuły i poświadczenia użytkownika. Funkcje takie jak preferencje użytkownika mogą być przechowywane w przeglądarce użytkownika, podobnie jak pliki cookie. Podobnie, tworząc natywną aplikację mobilną, możesz użyć magazynu internetowego HTML5 w połączeniu z lokalną bazą danych, aby zwiększyć szybkość swojej aplikacji. Dlatego, jako programiści front-end, musimy zbadać, w jaki sposób możemy wykorzystać moc przechowywania internetowego HTML5 w naszych aplikacjach na wczesnych etapach rozwoju.

Byłem częścią zespołu opracowującego serwis społecznościowy na dużą skalę i intensywnie korzystaliśmy z pamięci masowej HTML5. Na przykład, gdy użytkownik się loguje, przechowujemy zaszyfrowany identyfikator użytkownika w sesji HTML5 i używamy go do uwierzytelnienia użytkownika na chronionych stronach. Używamy tej funkcji również do przechowywania wszystkich nowych powiadomień push — takich jak nowe wiadomości na czacie, wiadomości z witryn internetowych i nowe kanały — i przekazywania ich z jednej strony na drugą. Gdy witryna społecznościowa generuje duży ruch, całkowite poleganie na serwerze w zakresie równoważenia obciążenia może nie działać, więc musisz zidentyfikować zadania i dane, które może obsłużyć przeglądarka użytkownika, a nie serwery.

tło projektu

Koszyk umożliwia odwiedzającym witrynę przeglądanie stron produktów i dodawanie produktów do koszyka. Odwiedzający może przeglądać wszystkie swoje pozycje i aktualizować swój koszyk (np. dodawać lub usuwać pozycje). Aby to osiągnąć, witryna musi przechowywać dane odwiedzającego i przekazywać je z jednej strony na drugą, dopóki odwiedzający nie przejdzie do strony kasy i nie dokona zakupu. Przechowywanie danych może odbywać się za pośrednictwem języka po stronie serwera lub po stronie klienta. W przypadku języka po stronie serwera serwer ponosi ciężar przechowywania danych, podczas gdy w przypadku języka po stronie klienta komputer użytkownika (komputer stacjonarny, tablet lub smartfon) przechowuje i przetwarza dane. Każde podejście ma swoje plusy i minusy. W tym samouczku skupimy się na prostym podejściu po stronie klienta, opartym na HTML5 i JavaScript.

Uwaga : aby móc skorzystać z tego samouczka, wymagana jest podstawowa znajomość HTML5, CSS i JavaScript.

Pliki projektu

Kliknij tutaj, aby pobrać pliki źródłowe projektu. Możesz też zobaczyć demo na żywo.

Przegląd przechowywania w sieci Web HTML5

Magazyn sieciowy HTML5 umożliwia aplikacjom sieciowym przechowywanie wartości lokalnie w przeglądarce, które mogą przetrwać sesję przeglądarki, podobnie jak pliki cookie. W przeciwieństwie do plików cookie, które muszą być wysyłane przy każdym żądaniu HTTP, dane dotyczące przechowywania danych w sieci nigdy nie są przesyłane na serwer; w ten sposób pamięć masowa internetowa przewyższa pliki cookie pod względem wydajności sieciowej. Ponadto pliki cookie umożliwiają przechowywanie tylko 4 KB danych na domenę, podczas gdy przechowywanie w sieci Web pozwala na co najmniej 5 MB na domenę. Magazyn internetowy działa jak prosta tablica, mapując klucze na wartości i ma dwa typy:

• Przechowywanie sesji
  Przechowuje dane w jednej sesji przeglądarki, gdzie stają się dostępne do momentu zamknięcia przeglądarki lub karty przeglądarki. Wyskakujące okienka otwierane z tego samego okna mogą wyświetlać pamięć sesji, podobnie jak ramki iframe w tym samym oknie. Jednak wiele okien z tego samego źródła (URL) nie widzi nawzajem swoich sesji.
• Lokalny magazyn
  Przechowuje dane w przeglądarce internetowej bez daty ważności. Dane są dostępne dla wszystkich okien o tym samym pochodzeniu (domenie), nawet gdy przeglądarka lub karty przeglądarki są ponownie otwierane lub zamykane.

Oba typy przechowywania są obecnie obsługiwane we wszystkich głównych przeglądarkach internetowych. Pamiętaj, że nie możesz przekazywać danych pamięci z jednej przeglądarki do drugiej, nawet jeśli obie przeglądarki odwiedzają tę samą domenę.

Zbuduj podstawowy koszyk na zakupy

Aby zbudować nasz koszyk na zakupy, najpierw tworzymy stronę HTML z prostym koszykiem do wyświetlania przedmiotów i prostym formularzem do dodawania lub edycji koszyka. Następnie dodajemy do niego magazyn internetowy HTML, a następnie kodowanie JavaScript. Chociaż używamy tagów lokalnego przechowywania HTML5, wszystkie kroki są identyczne jak w przypadku przechowywania sesji HTML5 i można je zastosować do tagów przechowywania sesji HTML5. Na koniec omówimy trochę kodu jQuery, jako alternatywy dla kodu JavaScript, dla osób zainteresowanych korzystaniem z jQuery.

Dodaj lokalną pamięć masową HTML5 do koszyka

Nasza strona HTML to strona podstawowa, w nagłówku znajdują się znaczniki dla zewnętrznego JavaScript i CSS.

 <!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>

Poniżej znajduje się treść HTML, która pojawia się w treści strony:

 <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>

Dodawanie kodu JavaScript do koszyka

Utworzymy i wywołamy funkcję JavaScript doShowAll() w zdarzeniu onload() , aby sprawdzić obsługę przeglądarki i dynamicznie utworzyć tabelę, która pokazuje parę nazwa-wartość magazynu.

 <body onload="doShowAll()">

Alternatywnie możesz użyć zdarzenia onload JavaScript, dodając to do kodu JavaScript:

 window.load=doShowAll();

Lub użyj tego dla jQuery:

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

W funkcji CheckBrowser() chcielibyśmy sprawdzić, czy przeglądarka obsługuje przechowywanie HTML5. Pamiętaj, że ten krok może nie być wymagany, ponieważ obsługuje go większość nowoczesnych przeglądarek internetowych.

 /* =====> 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; } }

Wewnątrz funkcji doShowAll() , jeśli funkcja CheckBrowser() najpierw oceni obsługę przeglądarki, to podczas ładowania strony dynamicznie utworzy tabelę dla listy zakupów. Możesz iterować klucze (nazwy właściwości) par klucz-wartość przechowywanych w pamięci lokalnej w pętli JavaScript, jak pokazano poniżej. Na podstawie wartości magazynu ta metoda dynamicznie wypełnia tabelę, aby wyświetlić parę klucz-wartość przechowywaną w magazynie lokalnym.

 // 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'); } }

Uwaga : albo Ty, albo Twój framework będziecie mieli preferowaną metodę tworzenia nowych węzłów DOM i obsługi zdarzeń. Aby wszystko było jasne i skoncentrowane, nasz przykład używa .innerHTML i wbudowanych programów obsługi zdarzeń , mimo że normalnie unikalibyśmy tego w kodzie produkcyjnym.

Wskazówka: jeśli chcesz używać jQuery do wiązania danych, możesz po prostu zastąpić document.getElementById('list').innerHTML = list; z $('#list').html()=list; .

Uruchom i przetestuj koszyk

W poprzednich dwóch sekcjach dodaliśmy kod do nagłówka HTML i dodaliśmy kod HTML do formularza koszyka i koszyka. Stworzyliśmy również funkcję JavaScript, aby sprawdzić obsługę przeglądarki i wypełnić koszyk pozycjami w koszyku. Podczas wypełniania elementów koszyka JavaScript pobiera wartości z magazynu internetowego HTML zamiast z bazy danych. W tej części pokażemy, jak dane są wstawiane do silnika przechowywania HTML5. Oznacza to, że użyjemy lokalnej pamięci HTML5 w połączeniu z JavaScriptem, aby wstawić nowe elementy do koszyka, a także edytować istniejący element w koszyku.

Uwaga : Poniżej dodałem sekcje z poradami, aby pokazać kod jQuery, jako alternatywę dla tych w JavaScript.

Utworzymy osobny element div HTML do przechwytywania danych wprowadzanych przez użytkownika i przesyłania. Dołączymy odpowiednią funkcję JavaScript w zdarzeniu onClick dla przycisków.

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

Możesz ustawić właściwości obiektu localStorage podobnie do normalnego obiektu JavaScript. Oto przykład, jak możemy ustawić właściwość myProperty pamięci lokalnej na wartość myValue :

 localStorage.myProperty="myValue";

Możesz usunąć lokalną właściwość pamięci w następujący sposób:

 delete localStorage.myProperty;

Alternatywnie możesz użyć następujących metod, aby uzyskać dostęp do pamięci lokalnej:

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

Aby zapisać parę klucz-wartość, pobierz wartość odpowiedniego obiektu JavaScript i wywołaj metodę setItem :

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

Poniżej znajduje się alternatywa jQuery dla funkcji SaveItem . Najpierw dodaj identyfikator do danych wejściowych formularza:

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

Następnie wybierz dane wejściowe formularza według identyfikatora i uzyskaj ich wartości. Jak widać poniżej, jest znacznie prostsze niż JavaScript:

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

Aby zaktualizować element w koszyku, musisz najpierw sprawdzić, czy klucz tego elementu już istnieje w pamięci lokalnej, a następnie zaktualizować jego wartość, jak pokazano poniżej:

 //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(); }

Poniżej przedstawiono alternatywę jQuery.

 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(); }

Użyjemy metody removeItem , aby usunąć element z magazynu.

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

Wskazówka: Podobnie jak w poprzednich dwóch funkcjach, możesz użyć selektorów jQuery w funkcji RemoveItem .

Istnieje inna metoda przechowywania lokalnego, która umożliwia wyczyszczenie całej pamięci lokalnej. Wywołujemy funkcję ClearAll() w zdarzeniu onClick przycisku „Wyczyść”:

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

Używamy metody clear , aby wyczyścić pamięć lokalną, jak pokazano poniżej:

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

Pamięć sesji

Obiekt sessionStorage działa w taki sam sposób jak localStorage . Możesz zastąpić powyższy przykład obiektem sessionStorage , aby dane wygasły po jednej sesji. Gdy użytkownik zamknie okno przeglądarki, pamięć zostanie wyczyszczona. Krótko mówiąc, interfejsy API dla localStorage i sessionStorage są identyczne, co pozwala na użycie następujących metod:

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

Wózki sklepowe z tablicami i przedmiotami

Ponieważ magazyn internetowy HTML5 obsługuje tylko przechowywanie z pojedynczą wartością nazwy, musisz użyć JSON lub innej metody, aby przekonwertować tablice lub obiekty na pojedynczy ciąg. Możesz potrzebować tablicy lub obiektu, jeśli masz kategorię i podkategorie przedmiotów lub jeśli masz koszyk z wieloma danymi, takimi jak informacje o kliencie, informacje o przedmiocie itp. Wystarczy implodować elementy tablicy lub obiektu w łańcuch przechowywać je w magazynie internetowym, a następnie rozbić (lub podzielić) je z powrotem do tablicy, aby wyświetlić je na innej stronie. Przeanalizujmy podstawowy przykład koszyka, który zawiera trzy zestawy informacji: informacje o kliencie, informacje o produkcie i niestandardowy adres pocztowy. Najpierw używamy JSON.stringify, aby przekonwertować obiekt na ciąg. Następnie używamy JSON.parse, aby go odwrócić.

Wskazówka : pamiętaj, że nazwa klucza powinna być unikalna dla każdej domeny.

 //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);

Streszczenie

W tym samouczku nauczyliśmy się, jak krok po kroku zbudować koszyk na zakupy, korzystając z pamięci internetowej HTML5 i JavaScript. Widzieliśmy, jak używać jQuery jako alternatywy dla JavaScript. Omówiliśmy również funkcje JSON, takie jak stringify i parse do obsługi tablic i obiektów w koszyku. Możesz skorzystać z tego samouczka, dodając więcej funkcji, takich jak dodawanie kategorii produktów i podkategorii podczas przechowywania danych w wielowymiarowej tablicy JavaScript. Co więcej, możesz zastąpić cały kod JavaScript jQuery.

Zobaczyliśmy, co jeszcze programiści mogą osiągnąć dzięki magazynowi internetowemu HTML5 i jakie inne funkcje mogą dodać do swoich witryn. Na przykład możesz użyć tego samouczka, aby przechowywać preferencje użytkownika, ulubione treści, listy życzeń i ustawienia użytkownika, takie jak nazwy i hasła w witrynach internetowych i natywnych aplikacjach mobilnych, bez korzystania z bazy danych.

Podsumowując, oto kilka kwestii, które należy wziąć pod uwagę przy wdrażaniu przechowywania danych w sieci HTML5:

• Niektórzy użytkownicy mogą mieć ustawienia prywatności, które uniemożliwiają przeglądarce przechowywanie danych.
• Niektórzy użytkownicy mogą używać przeglądarki w trybie incognito.
• Należy pamiętać o kilku problemach z zabezpieczeniami, takich jak ataki fałszowania DNS, ataki między katalogami i włamanie do danych wrażliwych.

Powiązane czytanie

• „Limity pamięci przeglądarki i kryteria eksmisji”, dokumentacja internetowa MDN, Mozilla
• „Przechowywanie w sieci”, HTML Living Standard,
• „W tym tygodniu w HTML 5”, blog WHATWG