Crearea unui coș de cumpărături cu stocare web HTML5

Odată cu apariția HTML5, multe site-uri au putut înlocui plugin-ul și codurile JavaScript cu coduri HTML simple, mai eficiente, cum ar fi audio, video, geolocalizare etc. Etichetele HTML5 au făcut munca dezvoltatorilor mult mai ușoară, sporind în același timp timpul de încărcare a paginii și performanța site-ului. În special, stocarea web HTML5 a schimbat jocul, deoarece permit browserelor utilizatorilor să stocheze datele utilizatorului fără a utiliza un server. Prin urmare, crearea de stocare web a permis dezvoltatorilor front-end să realizeze mai multe pe site-ul lor, fără să cunoască sau să folosească codificarea sau baza de date pe server.

Site-urile web de comerț electronic online folosesc în principal limbaje server, cum ar fi PHP, pentru a stoca datele utilizatorilor și a le transmite de la o pagină la alta. Folosind cadre JavaScript back-end, cum ar fi Node.js, putem atinge același obiectiv. Cu toate acestea, în acest tutorial, vă vom arăta pas cu pas cum să construiți un coș de cumpărături cu HTML5 și un cod JavaScript minor. Alte utilizări ale tehnicilor din acest tutorial ar fi stocarea preferințelor utilizatorului, conținutul preferat al utilizatorului, listele de dorințe și setările utilizatorului, cum ar fi numele și parola, pe site-uri web și aplicații mobile native fără a utiliza o bază de date.

Multe site-uri web cu trafic ridicat se bazează pe tehnici complexe, cum ar fi clusteringul serverelor, echilibrarea încărcăturii DNS, stocarea în cache pe partea client și pe partea serverului, baze de date distribuite și microservicii pentru a optimiza performanța și disponibilitatea. Într-adevăr, provocarea majoră pentru site-urile web dinamice este de a prelua date dintr-o bază de date și de a folosi un limbaj de pe partea serverului, cum ar fi PHP, pentru a le procesa. Cu toate acestea, stocarea la distanță a bazelor de date ar trebui utilizată numai pentru conținutul esențial al site-ului web, cum ar fi articolele și acreditările de utilizator. Caracteristici precum preferințele utilizatorului pot fi stocate în browserul utilizatorului, similar cookie-urilor. De asemenea, atunci când creați o aplicație mobilă nativă, puteți utiliza stocarea web HTML5 împreună cu o bază de date locală pentru a crește viteza aplicației dvs. Astfel, ca dezvoltatori front-end, trebuie să explorăm modalități prin care putem exploata puterea stocării web HTML5 în aplicațiile noastre în stadiile incipiente de dezvoltare.

Am făcut parte dintr-o echipă care a dezvoltat un site de socializare la scară largă și am folosit foarte mult stocarea web HTML5. De exemplu, atunci când un utilizator se conectează, stocăm ID-ul utilizatorului codificat într-o sesiune HTML5 și îl folosim pentru a autentifica utilizatorul pe paginile protejate. De asemenea, folosim această funcție pentru a stoca toate notificările push noi - cum ar fi mesajele noi de chat, mesajele site-ului web și fluxurile noi - și le transmitem de la o pagină la alta. Când un site de socializare primește trafic ridicat, încrederea totală pe server pentru echilibrarea încărcăturii ar putea să nu funcționeze, așa că trebuie să identificați sarcinile și datele care pot fi gestionate de browserul utilizatorului în loc de serverele dvs.

Contextul proiectului

Un coș de cumpărături permite vizitatorului unui site web să vadă paginile produselor și să adauge articole în coșul lor. Vizitatorul își poate revizui toate articolele și își poate actualiza coșul (cum ar fi pentru a adăuga sau elimina articole). Pentru a realiza acest lucru, site-ul trebuie să stocheze datele vizitatorului și să le transmită de la o pagină la alta, până când vizitatorul merge la pagina de checkout și face o achiziție. Stocarea datelor se poate face printr-o limbă pe partea de server sau una pe partea clientului. Cu o limbă pe partea serverului, serverul suportă greutatea stocării datelor, în timp ce cu o limbă pe partea clientului, computerul vizitatorului (desktop, tabletă sau smartphone) stochează și procesează datele. Fiecare abordare are avantajele și dezavantajele sale. În acest tutorial, ne vom concentra pe o abordare simplă la nivelul clientului, bazată pe HTML5 și JavaScript.

Notă : Pentru a putea urma acest tutorial, sunt necesare cunoștințe de bază despre HTML5, CSS și JavaScript.

Fișiere de proiect

Faceți clic aici pentru a descărca fișierele sursă ale proiectului. Puteți vedea și o demonstrație live.

Prezentare generală despre stocarea web HTML5

Stocarea web HTML5 permite aplicațiilor web să stocheze valorile local în browser care pot supraviețui sesiunii de browser, la fel ca cookie-urile. Spre deosebire de cookie-urile care trebuie trimise la fiecare solicitare HTTP, datele de stocare web nu sunt niciodată transferate pe server; astfel, stocarea web depășește cookie-urile în performanța web. Mai mult, cookie-urile vă permit să stocați doar 4 KB de date pe domeniu, în timp ce stocarea web permite cel puțin 5 MB pe domeniu. Stocarea web funcționează ca o simplă matrice, mapând cheile la valori și au două tipuri:

• Stocarea sesiunii
  Aceasta stochează datele într-o sesiune de browser, unde devin disponibile până când browserul sau fila browserului sunt închise. Ferestrele pop-up deschise din aceeași fereastră pot vedea stocarea sesiunii, la fel și cadrele iframe din aceeași fereastră. Cu toate acestea, mai multe ferestre de la aceeași origine (URL) nu pot vedea reciproc spațiul de stocare al sesiunii.
• Stocare locală
  Aceasta stochează date în browser-ul web fără dată de expirare. Datele sunt disponibile pentru toate ferestrele cu aceeași origine (domeniu), chiar și atunci când browserul sau filele browserului sunt redeschise sau închise.

Ambele tipuri de stocare sunt acceptate în prezent în toate browserele web majore. Rețineți că nu puteți transmite date de stocare de la un browser la altul, chiar dacă ambele browsere vizitează același domeniu.

Construiește un coș de cumpărături de bază

Pentru a ne construi coșul de cumpărături, mai întâi creăm o pagină HTML cu un coș simplu pentru a afișa articolele și un formular simplu pentru a adăuga sau edita coșul. Apoi, îi adăugăm stocare web HTML, urmată de codificare JavaScript. Deși folosim etichete de stocare locală HTML5, toți pașii sunt identici cu cei ai stocării sesiunii HTML5 și pot fi aplicați etichetelor de stocare a sesiunii HTML5. În cele din urmă, vom trece peste un cod jQuery, ca alternativă la codul JavaScript, pentru cei interesați să folosească jQuery.

Adăugați spațiu de stocare local HTML5 în coșul de cumpărături

Pagina noastră HTML este o pagină de bază, cu etichete pentru JavaScript extern și CSS referite în cap.

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

Mai jos este conținutul HTML care apare în corpul paginii:

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

Adăugarea JavaScript în coșul de cumpărături

Vom crea și vom apela funcția JavaScript doShowAll() în evenimentul onload() pentru a verifica compatibilitatea browserului și pentru a crea dinamic tabelul care arată perechea nume-valoare de stocare.

 <body onload="doShowAll()">

Alternativ, puteți utiliza evenimentul de încărcare JavaScript adăugând acesta la codul JavaScript:

 window.load=doShowAll();

Sau folosește asta pentru jQuery:

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

În funcția CheckBrowser() , am dori să verificăm dacă browserul acceptă stocarea HTML5. Rețineți că acest pas ar putea să nu fie necesar, deoarece majoritatea browserelor web moderne îl acceptă.

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

În interiorul doShowAll() , dacă funcția CheckBrowser() evaluează mai întâi suportul pentru browser, atunci va crea dinamic tabelul pentru lista de cumpărături în timpul încărcării paginii. Puteți repeta cheile (numele proprietăților) perechilor cheie-valoare stocate în stocarea locală în interiorul unei bucle JavaScript, așa cum se arată mai jos. Pe baza valorii de stocare, această metodă populează tabelul în mod dinamic pentru a afișa perechea cheie-valoare stocată în stocarea locală.

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

Notă : fie dumneavoastră, fie cadrul dumneavoastră veți avea o metodă preferată de a crea noi noduri DOM și de a gestiona evenimente. Pentru a menține lucrurile clare și concentrate, exemplul nostru folosește .innerHTML și handlere de evenimente inline, chiar dacă în mod normal am evita asta în codul de producție.

Sfat: Dacă doriți să utilizați jQuery pentru a lega date, puteți doar să înlocuiți document.getElementById('list').innerHTML = list; cu $('#list').html()=list; .

Rulați și testați coșul de cumpărături

În cele două secțiuni anterioare, am adăugat cod la capul HTML și am adăugat HTML la formularul și la coșul de cumpărături. De asemenea, am creat o funcție JavaScript pentru a verifica compatibilitatea cu browserul și pentru a completa coșul cu articolele din coș. La popularea articolelor din coș, JavaScript preia valori din stocarea web HTML, în loc de o bază de date. În această parte, vă vom arăta cum sunt inserate datele în motorul de stocare HTML5. Adică, vom folosi stocarea locală HTML5 împreună cu JavaScript pentru a insera articole noi în coșul de cumpărături, precum și pentru a edita un articol existent în coș.

Notă : am adăugat secțiuni de sfaturi mai jos pentru a afișa codul jQuery, ca alternativă la cele JavaScript.

Vom crea un element div HTML separat pentru a captura intrarea și trimiterea utilizatorului. Vom atașa funcția JavaScript corespunzătoare în evenimentul onClick pentru butoane.

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

Puteți seta proprietăți pe obiectul localStorage similar cu un obiect JavaScript normal. Iată un exemplu despre cum putem seta proprietatea de stocare locală myProperty la valoarea myValue :

 localStorage.myProperty="myValue";

Puteți șterge proprietatea de stocare locală astfel:

 delete localStorage.myProperty;

Alternativ, puteți utiliza următoarele metode pentru a accesa stocarea locală:

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

Pentru a salva perechea cheie-valoare, obțineți valoarea obiectului JavaScript corespunzător și apelați metoda setItem :

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

Mai jos este alternativa jQuery pentru funcția SaveItem . Mai întâi, adăugați un ID la intrările din formular:

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

Apoi, selectați intrările de formular după ID și obțineți valorile acestora. După cum puteți vedea mai jos, este mult mai simplu decât JavaScript:

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

Pentru a actualiza un articol din coșul de cumpărături, trebuie mai întâi să verificați dacă cheia articolului respectiv există deja în stocarea locală, apoi să actualizați valoarea acestuia, după cum se arată mai jos:

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

Mai jos arată alternativa 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(); }

Vom folosi metoda removeItem pentru a șterge un articol din stocare.

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

Sfat: Similar celor două funcții anterioare, puteți utiliza selectoare jQuery în funcția RemoveItem .

Există o altă metodă de stocare locală care vă permite să ștergeți întreaga stocare locală. Apelăm funcția ClearAll() în evenimentul onClick al butonului „Șterge”:

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

Folosim metoda clear pentru a șterge stocarea locală, după cum se arată mai jos:

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

Stocarea sesiunii

Obiectul sessionStorage funcționează în același mod ca localStorage . Puteți înlocui exemplul de mai sus cu obiectul sessionStorage pentru a expira datele după o sesiune. Odată ce utilizatorul închide fereastra browserului, spațiul de stocare va fi șters. Pe scurt, API-urile pentru localStorage și sessionStorage sunt identice, permițându-vă să utilizați următoarele metode:

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

Coșuri de cumpărături cu matrice și obiecte

Deoarece stocarea web HTML5 acceptă doar stocarea cu o singură valoare a numelui, trebuie să utilizați JSON sau o altă metodă pentru a vă converti matricele sau obiectele într-un singur șir. Este posibil să aveți nevoie de o matrice sau un obiect dacă aveți o categorie și subcategorii de articole sau dacă aveți un coș de cumpărături cu mai multe date, cum ar fi informații despre clienți, informații despre articol etc. Trebuie doar să imploziți matricea sau obiectele dvs. într-un șir. pentru a le stoca în stocarea web și apoi le explodați (sau împărțiți) înapoi într-o matrice pentru a le afișa pe altă pagină. Să trecem printr-un exemplu de bază de coș de cumpărături care are trei seturi de informații: informații despre client, informații despre articol și adresă de corespondență personalizată. În primul rând, folosim JSON.stringify pentru a converti obiectul într-un șir. Apoi, folosim JSON.parse pentru a-l inversa.

Sugestie : rețineți că numele-cheie ar trebui să fie unic pentru fiecare domeniu.

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

rezumat

În acest tutorial, am învățat cum să construim un coș de cumpărături pas cu pas folosind stocarea web HTML5 și JavaScript. Am văzut cum să folosim jQuery ca alternativă la JavaScript. Am discutat, de asemenea, despre funcțiile JSON precum stringify și parse pentru a gestiona matrice și obiecte dintr-un coș de cumpărături. Puteți construi pe acest tutorial adăugând mai multe funcții, cum ar fi adăugarea de categorii și subcategorii de produse în timp ce stocați date într-o matrice multidimensională JavaScript. Mai mult, puteți înlocui întregul cod JavaScript cu jQuery.

Am văzut ce alte lucruri pot realiza dezvoltatorii cu stocarea web HTML5 și ce alte funcții pot adăuga site-urilor lor web. De exemplu, puteți folosi acest tutorial pentru a stoca preferințele utilizatorilor, conținutul preferat, listele de dorințe și setările utilizatorului, cum ar fi nume și parole, pe site-uri web și aplicații mobile native, fără a utiliza o bază de date.

În concluzie, iată câteva aspecte de luat în considerare atunci când implementați stocarea web HTML5:

• Unii utilizatori pot avea setări de confidențialitate care împiedică browserul să stocheze date.
• Unii utilizatori își pot folosi browserul în modul incognito.
• Fiți conștienți de câteva probleme de securitate, cum ar fi atacurile de falsificare DNS, atacurile încrucișate și compromiterea datelor sensibile.

Lectură aferentă

• „Limite de stocare a browserului și criterii de evacuare”, documente web MDN, Mozilla
• „Stocare web”, Standard de viață HTML,
• „Săptămâna aceasta în HTML 5”, Blogul WHATWG