LocalStorage e SessionStorage | Spiegato

L'API Web e l'API di archiviazione Web sono due delle API più utili supportate dalla maggior parte dei browser, l'API di archiviazione Web dimostra due oggetti il memoria locale spazio di archiviazione e SessionStorage che ci aiutano a archiviare i nostri dati nella memoria del browser. Entrambi questi oggetti ci consentono di archiviare i dati a livello locale, con l'unica differenza che con l'oggetto sessionStorage, i dati vengono eliminati automaticamente quando la sessione scade, mentre con l'oggetto LocalStorage i dati vengono salvati in modo permanente.

Questi oggetti possono essere considerati come alternative per i cookie e hanno anche i loro vantaggi sui cookie, affermando che questi oggetti possono superare completamente i biscotti non è vero. I cookie possono essere letti dai server e da altre applicazioni Web mentre i dati archiviati localmente sul browser non possono essere letti da nessun server, ciò fornisce vantaggi di sicurezza.

LocalStorage e SessionStorage | Sintassi

Entrambi questi oggetti hanno funzioni identiche con sintassi identiche. La sintassi per l'oggetto LocalStorage è definita come

memoria locale.funzione (chiave, valore);

Allo stesso modo, per l'oggetto sessionStorage, la sintassi è definita come

SessionStorage.funzione (chiave, valore);

Funzioni fornite da LocalStorage & SessionStorage

Entrambi questi oggetti dall'API di archiviazione Web forniscono 5 funzioni e una variabile const come:

• setItem (): per archiviare una nuova voce nell'archiviazione locale sotto forma di coppie di valore chiave
• getItem (): per recuperare una voce dall'archiviazione locale utilizzando la sua chiave
• Clear (): per cancellare lo stoccaggio locale del browser
• Rimuovi (): per rimuovere un valore dall'archiviazione locale utilizzando una chiave
• Key (): per restituire il nome della chiave usando il suo valore dell'indice
• lunghezza (): una variabile che memorizza il numero di voci nella memoria locale

LocalStorage e SessionStorage | Utilizzo

Per dimostrare l'uso dell'API di archiviazione Web, aprire il browser di tua scelta (Chrome nel nostro caso) e visitare un sito come WWW.Google.com.

Come creare/aggiungere dati nel metodo setItem () setItem ()

Crea una nuova immissione di dati nell'archiviazione locale digitando la seguente riga di codice nella console del browser:

memoria locale.setItem ("nome", "John Doe");

Se il comando esegue senza alcun errore, ciò significa che una nuova voce è stata effettuata correttamente nella memoria del browser.

Per verificarlo, vai alla scheda "Applicazioni" negli strumenti dello sviluppatore ed espandi l'archiviazione locale. Dovresti essere in grado di vedere il valore nell'Explorer:

Come accedere/ottenere i dati dal metodo LocalStorage utilizzando GetItem ()

Per accedere a qualsiasi voce dall'archiviazione locale, è possibile utilizzare un operatore dot con l'oggetto LocalStorage e quindi immettere la chiave o utilizzare la funzione getItem (). Per accedere al "nome" che abbiamo appena archiviato, possiamo usare:

var name = localStorage.Nome;
console.registro (nome)

L'output è come:

Oppure possiamo usare il comando come mostrato:

console.Registro (LocalStorage.getItem ("nome"));

L'output è come

Archiviazione permanente dell'oggetto LocalStorage | Verifica

Per verificare che l'oggetto LocalStorage archivia i dati in modo permanente (fino a quando non viene rimosso manualmente), chiudere i browser che avevano precedentemente aperto il link in cui si sono archiviati alcuni dati (nel nostro caso era Google.com)

Hai terminato la stretta di mano dorata e terminato le sessioni correnti con il sito Web chiudendo i browser, riapri il browser e vai sullo stesso sito Web e poi vai negli strumenti per sviluppatori> Applicazioni> Archiviazione locale per verificare se i dati sono ancora lì o meno :

Tutti i passaggi di cui sopra possono essere eseguiti con l'oggetto sessionStorage, ma ricorda che eliminerà tutti i dati alla scadenza della sessione. Vediamo la dimostrazione.

Come creare/aggiungere dati in sessionStorage utilizzando il metodo setItem ()

Creeremo prima una nuova voce in SessionStorage con la seguente riga di codice:

SessionStorage.setItem ("lavoro", "revisore dei conti");

La console visualizza "indefinita", il che significa che il comando è stato eseguito correttamente senza alcun errore:

Possiamo verificare l'archiviazione nella scheda di archiviazione della sessione:

Chiudi i browser e riapri lo stesso collegamento e quindi vai sugli strumenti dello sviluppatore> Applicazioni> STAGIONI STAGIONI, vedrai i seguenti risultati:

Puoi vedere che la voce è stata eliminata, ciò dimostra che l'oggetto sessionStorage memorizza solo i dati nella memoria locale del browser per una sola sessione.

Conclusione

Gli oggetti LocalStorage e SessionStorage vengono utilizzati per archiviare i dati nell'archiviazione locale del browser e fanno parte dell'API di archiviazione Web; Entrambi questi oggetti forniscono 5 funzioni all'utente che consente agli utenti di creare, aggiornare, ottenere ed eliminare una voce dall'archiviazione locale. La differenza tra l'oggetto LocalStorage e SessionStorage è che l'oggetto LocalStorage memorizza in modo permanente i dati su un sito Web mentre l'oggetto Sessionstroage memorizza solo i dati per una sessione.