Come archiviare e recuperare i dati nel browser
Questo articolo discuterà della procedura per conservazione E recupero dati nel browser. Inoltre, verranno forniti esempi relativi all'utilizzo di LocalStorage e SessionStorage HTML Web Objects. Quindi iniziamo!
Oggetti di archiviazione Web nel browser
Due oggetti di archiviazione Web sono forniti da HTML, che è possibile utilizzare per archiviare e recuperare i dati. "memoria locale"È un tipo di archiviazione HTML che non ha una data di scadenza, mentre il"SessionStorage"L'oggetto memorizza solo le informazioni relative a una singola sessione, il che significa che la chiusura della scheda del browser corrente rimuoverà tutti i dati salvati.
Prima di utilizzare LocalStorage e SessionStorage, assicurarsi che l'archiviazione Web HTML sia supportato dal browser:
if (typeof (archiviazione) !== "Undefined")// Scrivi il codice per oggetti di archiviazione HTML
altro
// il tuo browser non è supportato
LocalStorage HTML Web Storage Object nel browser
Come accennato in precedenza, i dati archiviati all'interno dell'oggetto LocalStorage non hanno una data di scadenza e non vengono eliminati anche se il browser è chiuso. I dati memorizzati possono essere recuperati il giorno, la settimana o l'anno successivo.
Esempio 1: Utilizzo di LocalStorage HTML Web Storage Object nel browser
Nell'esempio seguente, creeremo un "memoria locale”Oggetto web con un"Nome: valore" paio:
Esegui il programma di cui sopra nel tuo editor di codice preferito o in qualsiasi sandbox di codifica online; Tuttavia, utilizzeremo il JSbin per questo scopo:
Come puoi vedere dall'output, abbiamo archiviato e recuperato con successo i dati utilizzando "memoria locale"Oggetto Web HTML:
Puoi anche eseguire il seguente codice per lo stesso scopo:
L'esempio fornito ti mostrerà anche lo stesso output:
Se si desidera rimuovere un elemento o una voce dal tuo oggetto LocalStorage, devi chiamare "Rimuovi oggetto()Metodo "e passa il"nome"Articolo come argomento:
memoria locale.removeItem ("nome");Esempio 2: Utilizzo di LocalStorage HTML Web Storage Object nel browser
Dai un'occhiata ad altri esempio. Nel programma JavaScript di seguito donati il "memoria locale"L'oggetto conta e memorizzerà il numero di volte in cui un utente ha fatto clic sul"Clic"Pulsante:
Fare clic sul pulsante per controllare il valore del contatore.
Qui, l'output mostra un "Clic"Pulsante; Fare clic su di esso per controllare il valore di bottoniClickCounter:
Inizialmente, il valore di ButtonClickCounter è stato impostato su "0,"E verrà incrementato ogni volta che faremo clic sul pulsante:
Oggetto Web di archiviazione HTML sessionStorage nel browser
L'HTML “SessionStorage"L'oggetto funziona allo stesso modo di"memoria locale“; Tuttavia, puoi usarlo solo per archiviare e recuperare i dati per la sessione corrente. Non appena la scheda browser aperta è chiusa, tutti i dati memorizzati verranno eliminati.
Esempio 2: Utilizzo di sessionStorage HTML Web Storage Object nel browser
Il seguente programma JavaScript memorizzerà e recupererà il "bottonClickcount"Per la sessione corrente. Il bottonClickCount viene aggiunto per contare il numero di volte in cui un utente ha fatto clic sul pulsante fornito:
Fare clic sul pulsante per controllare il valore del contatore.
Colpire il pulsante evidenziato è recuperare i dati memorizzati in "SessionStorage"Pulsante:
Conclusione
Gli sviluppatori possono utilizzare memoria locale E SessionStorage Oggetti Web HTML per archiviare e recuperare i dati nel browser. L'oggetto LocalStorage non ha una data di scadenza, mentre SessionStorage memorizza solo le informazioni relative a una singola sessione, il che significa che la chiusura della scheda del browser corrente rimuoverà tutti i dati salvati. Questo articolo ha discusso della procedura per l'archiviazione e il recupero dei dati nel browser. Inoltre, sono forniti anche esempi relativi a localizzazioni locali e sessionStorage HTML Web Objects Usage.