Creazione di un carrello con HTML5 Web Storage

Con l'avvento di HTML5, molti siti sono stati in grado di sostituire plug-in e codici JavaScript con codici HTML semplici e più efficienti come audio, video, geolocalizzazione, ecc. I tag HTML5 hanno reso il lavoro degli sviluppatori molto più semplice, migliorando al contempo il tempo di caricamento della pagina e le prestazioni del sito. In particolare, l'archiviazione Web HTML5 è stata una svolta in quanto consente ai browser degli utenti di archiviare i dati degli utenti senza utilizzare un server. Quindi la creazione dell'archiviazione Web ha consentito agli sviluppatori front-end di ottenere di più sul proprio sito Web senza conoscere o utilizzare la codifica o il database lato server.

I siti Web di e-commerce online utilizzano prevalentemente linguaggi lato server come PHP per archiviare i dati degli utenti e passarli da una pagina all'altra. Utilizzando framework di back-end JavaScript come Node.js, possiamo raggiungere lo stesso obiettivo. Tuttavia, in questo tutorial, ti mostreremo passo dopo passo come costruire un carrello della spesa con HTML5 e del codice JavaScript minore. Altri usi delle tecniche in questo tutorial sarebbero memorizzare le preferenze dell'utente, i contenuti preferiti dell'utente, le liste dei desideri e le impostazioni dell'utente come nome e password su siti Web e app mobili native senza utilizzare un database.

Molti siti Web ad alto traffico si basano su tecniche complesse come il clustering di server, i bilanciatori del carico DNS, la memorizzazione nella cache lato client e lato server, database distribuiti e microservizi per ottimizzare le prestazioni e la disponibilità. In effetti, la sfida principale per i siti Web dinamici è recuperare i dati da un database e utilizzare un linguaggio lato server come PHP per elaborarli. Tuttavia, l'archiviazione remota del database deve essere utilizzata solo per i contenuti essenziali del sito Web, come articoli e credenziali utente. Funzionalità come le preferenze dell'utente possono essere memorizzate nel browser dell'utente, in modo simile ai cookie. Allo stesso modo, quando crei un'app mobile nativa, puoi utilizzare l'archiviazione Web HTML5 insieme a un database locale per aumentare la velocità della tua app. Pertanto, come sviluppatori front-end, dobbiamo esplorare i modi in cui possiamo sfruttare la potenza dell'archiviazione Web HTML5 nelle nostre applicazioni nelle prime fasi di sviluppo.

Ho fatto parte di un team che ha sviluppato un sito Web sociale su larga scala e abbiamo utilizzato molto l'archiviazione Web HTML5. Ad esempio, quando un utente effettua l'accesso, memorizziamo l'ID utente con hash in una sessione HTML5 e lo utilizziamo per autenticare l'utente su pagine protette. Utilizziamo questa funzione anche per archiviare tutte le nuove notifiche push, come nuovi messaggi di chat, messaggi del sito Web e nuovi feed, e passarle da una pagina all'altra. Quando un sito Web social riceve un traffico elevato, il totale affidamento sul server per il bilanciamento del carico potrebbe non funzionare, quindi è necessario identificare attività e dati che possono essere gestiti dal browser dell'utente anziché dai server.

Sfondo del progetto

Un carrello consente al visitatore di un sito Web di visualizzare le pagine dei prodotti e aggiungere articoli al carrello. Il visitatore può rivedere tutti i suoi articoli e aggiornare il suo carrello (ad esempio per aggiungere o rimuovere articoli). Per ottenere ciò, il sito Web deve memorizzare i dati del visitatore e passarli da una pagina all'altra, fino a quando il visitatore non va alla pagina di pagamento ed effettua un acquisto. L'archiviazione dei dati può essere eseguita tramite un linguaggio lato server o uno lato client. Con una lingua lato server, il server sopporta il peso della memorizzazione dei dati, mentre con una lingua lato client, il computer del visitatore (desktop, tablet o smartphone) memorizza ed elabora i dati. Ogni approccio ha i suoi pro e contro. In questo tutorial, ci concentreremo su un semplice approccio lato client, basato su HTML5 e JavaScript.

Nota : per poter seguire questo tutorial è richiesta una conoscenza di base di HTML5, CSS e JavaScript.

File di progetto

Clicca qui per scaricare i file sorgente del progetto. Puoi anche vedere una demo dal vivo.

Panoramica dell'archiviazione Web HTML5

L'archiviazione Web HTML5 consente alle applicazioni Web di archiviare valori localmente nel browser che possono sopravvivere alla sessione del browser, proprio come i cookie. A differenza dei cookie che devono essere inviati ad ogni richiesta HTTP, i dati di archiviazione web non vengono mai trasferiti al server; quindi, l'archiviazione web supera i cookie nelle prestazioni web. Inoltre, i cookie consentono di memorizzare solo 4 KB di dati per dominio, mentre l'archiviazione web consente almeno 5 MB per dominio. L'archiviazione Web funziona come un semplice array, mappando le chiavi sui valori e ha due tipi:

• Archiviazione della sessione
  Questo memorizza i dati in una sessione del browser, dove diventano disponibili fino alla chiusura del browser o della scheda del browser. Le finestre popup aperte dalla stessa finestra possono vedere l'archiviazione della sessione, così come gli iframe all'interno della stessa finestra. Tuttavia, più finestre della stessa origine (URL) non possono visualizzare la memoria di sessione dell'altra.
• Memoria locale
  Questo memorizza i dati nel browser web senza data di scadenza. I dati sono disponibili per tutte le finestre con la stessa origine (dominio), anche quando il browser o le schede del browser vengono riaperte o chiuse.

Entrambi i tipi di archiviazione sono attualmente supportati in tutti i principali browser Web. Tieni presente che non puoi trasferire i dati di archiviazione da un browser all'altro, anche se entrambi i browser stanno visitando lo stesso dominio.

Costruisci un carrello della spesa di base

Per costruire il nostro carrello, creiamo prima una pagina HTML con un semplice carrello per mostrare gli articoli e un semplice modulo per aggiungere o modificare il carrello. Quindi, aggiungiamo lo spazio di archiviazione Web HTML, seguito dalla codifica JavaScript. Sebbene utilizziamo tag di archiviazione locale HTML5, tutti i passaggi sono identici a quelli dell'archiviazione di sessione HTML5 e possono essere applicati ai tag di archiviazione di sessione HTML5. Infine, esamineremo del codice jQuery, in alternativa al codice JavaScript, per coloro che sono interessati all'utilizzo di jQuery.

Aggiungi spazio di archiviazione locale HTML5 al carrello

La nostra pagina HTML è una pagina di base, con tag per JavaScript e CSS esterni referenziati nell'intestazione.

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

Di seguito è riportato il contenuto HTML che appare nel corpo della pagina:

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

Aggiunta di JavaScript al carrello

Creeremo e chiameremo la funzione JavaScript doShowAll() onload() per verificare il supporto del browser e per creare dinamicamente la tabella che mostra la coppia nome-valore di archiviazione.

 <body onload="doShowAll()">

In alternativa, puoi utilizzare l'evento di caricamento JavaScript aggiungendolo al codice JavaScript:

 window.load=doShowAll();

Oppure usa questo per jQuery:

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

Nella funzione CheckBrowser() , vorremmo verificare se il browser supporta l'archiviazione HTML5. Tieni presente che questo passaggio potrebbe non essere necessario perché la maggior parte dei browser Web moderni lo supporta.

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

All'interno di doShowAll() , se la funzione CheckBrowser() valuta prima il supporto del browser, creerà dinamicamente la tabella per la lista della spesa durante il caricamento della pagina. Puoi scorrere le chiavi (nomi di proprietà) delle coppie chiave-valore archiviate nella memoria locale all'interno di un ciclo JavaScript, come mostrato di seguito. In base al valore di archiviazione, questo metodo popola la tabella in modo dinamico per mostrare la coppia chiave-valore archiviata nell'archiviazione locale.

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

Nota : tu o il tuo framework avrete un metodo preferito per creare nuovi nodi DOM e gestire gli eventi. Per mantenere le cose chiare e mirate, il nostro esempio utilizza .innerHTML e gestori di eventi inline anche se normalmente lo evitiamo nel codice di produzione.

Suggerimento: se desideri utilizzare jQuery per associare i dati, puoi semplicemente sostituire document.getElementById('list').innerHTML = list; con $('#list').html()=list; .

Esegui e prova il carrello

Nelle due sezioni precedenti, abbiamo aggiunto il codice all'intestazione HTML e abbiamo aggiunto l'HTML al modulo e al carrello del carrello. Abbiamo anche creato una funzione JavaScript per verificare il supporto del browser e per popolare il carrello con gli articoli nel carrello. Nel popolare gli elementi del carrello, JavaScript recupera i valori dall'archivio Web HTML, anziché da un database. In questa parte, ti mostreremo come i dati vengono inseriti nel motore di archiviazione HTML5. In altre parole, utilizzeremo l'archiviazione locale HTML5 insieme a JavaScript per inserire nuovi articoli nel carrello degli acquisti, nonché per modificare un articolo esistente nel carrello.

Nota : ho aggiunto sezioni di suggerimenti di seguito per mostrare il codice jQuery, in alternativa a quelli JavaScript.

Creeremo un elemento div HTML separato per acquisire l'input e l'invio dell'utente. Allegheremo la funzione JavaScript corrispondente nell'evento onClick per i pulsanti.

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

È possibile impostare le proprietà sull'oggetto localStorage in modo simile a un normale oggetto JavaScript. Ecco un esempio di come possiamo impostare la proprietà di archiviazione locale myProperty sul valore myValue :

 localStorage.myProperty="myValue";

È possibile eliminare la proprietà di archiviazione locale in questo modo:

 delete localStorage.myProperty;

In alternativa, puoi utilizzare i seguenti metodi per accedere alla memoria locale:

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

Per salvare la coppia chiave-valore, ottieni il valore dell'oggetto JavaScript corrispondente e chiama il metodo setItem :

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

Di seguito è riportata l'alternativa a jQuery per la funzione SaveItem . Innanzitutto, aggiungi un ID agli input del modulo:

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

Quindi, seleziona gli input del modulo per ID e ottieni i loro valori. Come puoi vedere di seguito, è molto più semplice di JavaScript:

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

Per aggiornare un articolo nel carrello, devi prima verificare se la chiave dell'articolo esiste già nella memoria locale, quindi aggiornarne il valore, come mostrato di seguito:

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

Di seguito viene mostrata l'alternativa a 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(); }

Utilizzeremo il metodo removeItem per eliminare un elemento dalla memoria.

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

Suggerimento: in modo simile alle due funzioni precedenti, puoi utilizzare i selettori jQuery nella funzione RemoveItem .

Esiste un altro metodo per l'archiviazione locale che consente di cancellare l'intera memoria locale. Chiamiamo la funzione ClearAll() nell'evento onClick del pulsante "Cancella":

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

Usiamo il metodo clear per cancellare la memoria locale, come mostrato di seguito:

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

Archiviazione della sessione

L'oggetto sessionStorage funziona allo stesso modo di localStorage . È possibile sostituire l'esempio precedente con l'oggetto sessionStorage per far scadere i dati dopo una sessione. Una volta che l'utente chiude la finestra del browser, la memoria verrà cancellata. In breve, le API per localStorage e sessionStorage sono identiche, consentendo di utilizzare i seguenti metodi:

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

Carrelli Della Spesa Con Matrici E Oggetti

Poiché l'archiviazione Web HTML5 supporta solo l'archiviazione con valore nome singolo, è necessario utilizzare JSON o un altro metodo per convertire gli array o gli oggetti in un'unica stringa. Potresti aver bisogno di un array o di un oggetto se hai una categoria e sottocategorie di articoli, o se hai un carrello con più dati, come informazioni sul cliente, informazioni sull'articolo, ecc. Devi solo implodere il tuo array o gli articoli dell'oggetto in una stringa per archiviarli nell'archivio Web, quindi esploderli (o dividerli) in un array per mostrarli su un'altra pagina. Esaminiamo un esempio di base di un carrello degli acquisti che ha tre set di informazioni: informazioni sul cliente, informazioni sull'articolo e indirizzo postale personalizzato. Innanzitutto, utilizziamo JSON.stringify per convertire l'oggetto in una stringa. Quindi, utilizziamo JSON.parse per invertirlo.

Suggerimento : tieni presente che il nome-chiave dovrebbe essere univoco per ogni dominio.

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

Sommario

In questo tutorial, abbiamo imparato come creare un carrello della spesa passo dopo passo utilizzando l'archiviazione web HTML5 e JavaScript. Abbiamo visto come utilizzare jQuery come alternativa a JavaScript. Abbiamo anche discusso di funzioni JSON come stringify e parse per gestire array e oggetti in un carrello. Puoi basarti su questo tutorial aggiungendo più funzionalità, come l'aggiunta di categorie e sottocategorie di prodotti mentre memorizzi i dati in un array multidimensionale JavaScript. Inoltre, puoi sostituire l'intero codice JavaScript con jQuery.

Abbiamo visto quali altre cose possono realizzare gli sviluppatori con l'archiviazione Web HTML5 e quali altre funzionalità possono aggiungere ai loro siti Web. Ad esempio, puoi utilizzare questo tutorial per archiviare preferenze utente, contenuti preferiti, liste dei desideri e impostazioni utente come nomi e password su siti Web e app mobili native, senza utilizzare un database.

Per concludere, ecco alcuni aspetti da considerare quando si implementa l'archiviazione web HTML5:

• Alcuni utenti potrebbero avere impostazioni sulla privacy che impediscono al browser di memorizzare i dati.
• Alcuni utenti potrebbero utilizzare il browser in modalità di navigazione in incognito.
• Tieni presente alcuni problemi di sicurezza, come attacchi di spoofing DNS, attacchi tra directory e compromissione di dati sensibili.

Lettura correlata

• "Limiti di archiviazione del browser e criteri di eliminazione", documenti Web MDN, Mozilla
• "Archiviazione Web", HTML Living Standard,
• "Questa settimana in HTML 5", il blog WHATWG