HTML5 - Archiviazione del browser

Quando lavoriamo con le pagine web ci sono momenti in cui abbiamo bisogno di utilizzare dati che persistono durante la navigazione dell'utente, tuttavia non vogliamo o non possiamo utilizzare i database, quindi per questo possiamo utilizzare la memorizzazione nel browser.
Memoria del browser
Il browser ci permette di memorizzare una notevole quantità di dati con i diversi strumenti che ci mette a disposizione. HTML5, la decisione di utilizzare l'uno o l'altro passa attraverso la definizione di ciò che vogliamo fare.
Dei diversi tipi di archiviazione che possiamo utilizzare, evidenzieremo il memoria locale, con questo tipo di archiviazione possiamo salva diverse associazioni chiave-valore con cui possiamo mantenere una persistenza dei dati dell'utente sul tuo computer locale da dove accedi alla pagina HTML5.
Memoria locale
Per usare il memoria locale dipendiamo dalla proprietà globale memoria locale, ha detto proprietà we restituisce un oggetto Storage in cui avremo le diverse associazioni chiave - valore che abbiamo menzionato sopra.
Quando decidiamo di lavorare con questo tipo di storage potremo contare sui suoi diversi metodi per poter costruire le funzionalità di cui abbiamo bisogno, per questo motivo dobbiamo conoscerle, vediamo di seguito i metodi che abbiamo in questo tipo di stoccaggio locale.

• chiaro (): Questo metodo ci consente di pulire tutte le associazioni memorizzate nel nostro oggetto.
• getItem(): Ci permette di ottenere il valore dell'associazione utilizzando una chiave che passiamo come parametro.
• chiave (): Ci consente di ottenere la chiave dell'associazione utilizzando la tua posizione per essa.
• lunghezza: Indica la quantità di elementi chiave - valore che abbiamo memorizzato al momento.
• Rimuovi oggetto (): Invece di cancellare tutti gli elementi con clear(), con questo metodo possiamo rimuovere elementi specifici usando la loro chiave come identificatore.
• setItem (,): Questo metodo ci permette di aggiungere una nuova associazione o di aggiornarne una se la chiave che inseriamo esiste già.
• []: Ci consente di accedere al contenuto di una delle associazioni sotto forma di array.

Molto bene ora che conosciamo i metodi che abbiamo, creeremo un codice demo con il quale impareremo a utilizzare l'archiviazione locale:

 EsempioChiave inglese:Valore:Aggiungi Cancella
Ci sono elementi

 
Elementi:
-

 

 

In questo esempio abbiamo costruito una funzionalità che ci permette di scrivere valori nei campi di inserire il tipo di testo e quindi tramite funzioni per poter memorizzare questi valori localmente.
Vediamo come appare nel nostro browser:

Possiamo notare come possiamo aggiungere un numero di elementi e possiamo quindi esaminarli per mostrarli.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo