Guida per Principianti sull'API di Storage di JavaScript

Ciao là, futuri supereroi del coding! ? Oggi, ci immergeremo nel mondo dell'API di Storage di JavaScript. Non preoccuparti se non hai mai scritto una riga di codice prima - sarò la tua guida amichevole in questo viaggio entusiasmante. Iniziamo!

Cos'è l'API di Web Storage?

Immagina di avere un quaderno magico che può ricordare le cose per te, anche dopo che lo chiudi. Questo è più o meno quello che fa l'API di Web Storage per i siti web! È un modo per le applicazioni web memorizzare dati direttamente nel tuo browser.

Pensa a questo: stai giocando a un gioco su un sito web e vuoi salvare il tuo progresso. L'API di Web Storage permette al gioco di ricordare il tuo punteggio, anche se chiudi il browser e torni più tardi. Bel pezzo, vero?

Ci sono due tipi principali di storage web:

1. localStorage
2. sessionStorage

Esploriamo ciascuno di questi in dettaglio.

L'oggetto Window localStorage

Cos'è localStorage?

localStorage è come un armadio di stoccaggio persistente per la tua applicazione web. Mantiene i dati anche dopo aver chiuso il browser, rendendolo perfetto per lo stoccaggio a lungo termine.

Come usare localStorage

Ecco un esempio semplice di come usare localStorage:

// Memorizzare dati
localStorage.setItem("username", "CoolCoder123");

// Recuperare dati
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // Output: CoolCoder123

// Rimuovere dati
localStorage.removeItem("username");

// Pulire tutti i dati
localStorage.clear();

In questo esempio, stiamo memorizzando un nome utente, recuperandolo, rimuovendolo e poi pulendo tutti i dati. È come scrivere nel tuo quaderno magico, leggere ciò che hai scritto, cancellare una specifica nota e poi cancellare l'intero quaderno!

L'oggetto Window sessionStorage

Cos'è sessionStorage?

sessionStorage è come il cugino dimenticoso di localStorage. Memorizza i dati solo per una sessione. Quando chiudi la scheda del browser, puff! I dati scompaiono.

Come usare sessionStorage

Usare sessionStorage è molto simile a localStorage:

// Memorizzare dati
sessionStorage.setItem("tempScore", "1000");

// Recuperare dati
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // Output: 1000

// Rimuovere dati
sessionStorage.removeItem("tempScore");

// Pulire tutti i dati
sessionStorage.clear();

Questo è ottimo per memorizzare informazioni temporanee, come il punteggio di un gioco che hai solo mentre il giocatore è attivamente giocando.

Cookie vs localStorage vs sessionStorage

Ora confrontiamo questi metodi di storage usando una divertente analogia:

1. Cookies sono come appunti adesivi. Sono piccoli, possono essere letti dal server e hanno una data di scadenza.
2. localStorage è come un diario personale. Memorizza molte informazioni e le tiene per molto tempo.
3. sessionStorage è come una lavagna. Mantiene le informazioni temporaneamente e le cancella quando hai finito.

Ecco una tabella di confronto utile:

Caratteristica	Cookies	localStorage	sessionStorage
Capacità	~4KB	~5MB	~5MB
Scade	Manuale	Mai	Alla chiusura della scheda
Accesso del Server	Sì	No	No
Inviato con le Richieste	Sì	No	No

Proprietà e Metodi degli Oggetti di Storage

Both localStorage and sessionStorage share the same methods and properties. Let's explore them:

Proprietà

1. length: Restituisce il numero di elementi memorizzati.

console.log(localStorage.length);

Metodi

1. setItem(key, value): Aggiunge una coppia chiave/valore allo storage.
2. getItem(key): Recupera il valore associato alla chiave specificata.
3. removeItem(key): Rimuove l'elemento associato alla chiave specificata.
4. clear(): Rimuove tutti gli elementi dallo storage.
5. key(index): Restituisce il nome della chiave all'indice specificato.

Ecco un esempio che utilizza tutti questi metodi:

// Utilizzando setItem
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");

// Utilizzando getItem
console.log(localStorage.getItem("fruit")); // Output: apple

// Utilizzando key
console.log(localStorage.key(0)); // Output: fruit (o vegetable, l'ordine non è garantito)

// Utilizzando length
console.log(localStorage.length); // Output: 2

// Utilizzando removeItem
localStorage.removeItem("vegetable");

// Utilizzando clear
localStorage.clear();

Ecco fatto! Hai appena fatto i tuoi primi passi nel mondo dello storage web. Ricorda, la pratica fa la perfezione. Prova a creare una semplice pagina web e sperimenta con questi metodi di storage. Forse crea un piccolo gioco che ricorda il punteggio più alto del giocatore usando localStorage?

Prima di chiudere, ecco un piccolissimo scherzo di programmazione per te:

Perché i programmatori preferiscono la modalità scura? Perché la luce attira i bug! ??

Buon codice, e ricorda - ogni esperto era una volta un principiante. Continua ad imparare, continua a codificare, e, soprattutto, divertiti!

Credits: Image by storyset