L'archiviazione lato client è essenziale per le applicazioni Web. Potrebbe non essere a prova di proiettile come l'archiviazione lato server ma, senza di essa, le app Web non sarebbero in grado di implementare molte funzionalità moderne. Tutti i tipi di funzionalità dipendono dall'archiviazione lato client, dalle sessioni nei giochi ai carrelli degli acquisti sui siti Web di e-commerce.

L'archiviazione lato client consente inoltre alle app Web di implementare un'architettura incentrata sulla privacy. Puoi usarlo per assicurarti che i dati sensibili non lascino mai il dispositivo di un utente.

Che cos'è lo storage lato client?

Nello sviluppo Web, l'archiviazione lato client si riferisce ai vari modi in cui i browser Web possono archiviare i dati. Un'applicazione può quindi utilizzare questi dati per fornire funzionalità agli utenti. L'archiviazione lato client è fondamentale per alcuni motivi:

  • L'accesso ai dati archiviati sul client è notevolmente più rapido e la tua app può accedervi senza Internet.
    • instagram viewer
  • L'archiviazione lato client consente all'applicazione di ricordare più facilmente le preferenze di ciascun utente.
  • L'archiviazione permanente di alcuni dati sul client semplifica la protezione della privacy degli utenti.
  • La memorizzazione di tutti i dati dell'applicazione sul server è costosa, soprattutto su larga scala.

Esistono diverse forme di archiviazione lato client che puoi utilizzare nelle tue app Web.

Biscotti

Un cookie del browser è una parte di dati chiave/valore memorizzati come una stringa sul tuo computer. I browser inviano tutti i cookie per un determinato sito al server del sito ad ogni richiesta. I cookie sono stati il ​​primo (e per qualche tempo l'unico) tipo di archiviazione lato client.

Non esiste un limite ufficiale alla dimensione di un cookie, ma i singoli browser impongono limiti variabili alla dimensione e al numero di cookie che è possibile impostare. Il RFC 6265 Sezione 6.1 afferma che le seguenti funzionalità minime relative ai cookie che i browser (user agent) dovrebbero fornire:

Le implementazioni pratiche degli user agent hanno limiti al numero e alle dimensioni dei cookie che possono memorizzare. I programmi utente di uso generale DEVONO fornire ciascuna delle seguenti capacità minime:

  • Almeno 4096 byte per cookie (misurato dalla somma della lunghezza del nome, del valore e degli attributi del cookie).
  • Almeno 50 cookie per dominio.
  • Almeno 3000 cookie in totale.

I cookie possono rimanere nel browser per periodi di tempo variabili. Alcuni scadono alla fine di una sessione di pagina e altri hanno date di scadenza arbitrarie che possono estendersi fino a mesi nel futuro.

I browser creano una sessione di pagina quando si apre una nuova scheda e la terminano quando si chiude la scheda o il browser. Se ricarichi o aggiorni la pagina, il browser non terminerà la sessione della pagina.

Casi d'uso per i cookie

I cookie sono più adatti per memorizzare piccole porzioni di dati che il server ha spesso bisogno di leggere o modificare. Come mai?

  • I cookie vengono automaticamente allegati a tutte le richieste di rete
  • I cookie possono memorizzare solo piccole quantità di dati di stringa.

Puoi utilizzare i cookie per identificare un utente (come un ID di sessione), registrare una visita a una pagina a scopo di bookmarking o memorizzare il punteggio più alto di un gioco.

Memoria locale

Come un cookie, localStorage è un archivio chiave/valore che memorizza i dati della stringa. Sebbene entrambi i tipi di archiviazione siano simili, localStorage e cookie differiscono in diversi modi:

  • LocalStorage dipende da JavaScript.
  • I dati in localStorage risiedono principalmente nel browser. Devi inviarlo deliberatamente al server, invece che al browser che lo invia ad ogni richiesta.
  • LocalStorage non ha data di scadenza. Persiste sul client fino a quando uno sviluppatore non lo elimina con JavaScript o l'utente cancella la memoria del browser.
  • LocalStorage ha una capacità di archiviazione molto maggiore. Il Specifiche di WHATWG non specifica un limite rigido ma, secondo Wikipedia, la dimensione minima di localStorage tra i principali browser è di 5 MB:

I browser limitano i cookie a 4 kilobyte. L'archiviazione Web offre una capacità di archiviazione di gran lunga maggiore:

  • Opera 10.50+ consente 5 MB
  • Safari 8 consente 5 MB
  • Firefox 34 consente 10 MB
  • Google Chrome consente 10 MB per origine
  • Internet Explorer consente 10 MB per area di archiviazione

Casi d'uso per LocalStorage

LocalStorage è perfetto per archiviare una grande quantità di dati a cui il server ha raramente bisogno di fare riferimento. Potrebbe trattarsi delle impostazioni utente di un'applicazione, dei dettagli di configurazione del tema o dei dati in un modulo compilato di recente. Questo perché localStorage ha un limite di archiviazione molto più grande rispetto ai cookie, ma è necessario fare uno sforzo extra per inviare i suoi dati al server.

Se archivi i dati come JSON, puoi archiviare dati ragionevolmente complessi utilizzando localStorage, anche se può archiviare solo stringhe.

LocalStorage è vulnerabile a Attacchi XSS, quindi non dovresti archiviare dati sensibili del client al suo interno.

SessionStorage

SessionStorage è un archivio chiave/valore che funziona quasi uguale a localStorage, tranne una cosa. I dati memorizzati persistono solo per la durata di una sessione di pagina.

Casi d'uso per SessionStorage

Puoi usare SessionStorage per archiviare lo stesso tipo di dati di localStorage, ma solo quando non è necessario che i dati persistano oltre una sessione di pagina.

IndicizzatoDB

IndexedDB è una potente API del browser per l'archiviazione di grandi quantità di dati strutturati. È un database transazionale orientato agli oggetti che memorizza i dati in coppie chiave/valore.

Se hai a che fare con quantità di dati inferiori, localStorage/sessionStorage è la scelta migliore e più semplice. Sfortunatamente, sono limitati dalla loro capacità di archiviazione e dal fatto che possono archiviare solo dati di stringa. IndexedDB non solo consente di archiviare diversi tipi di dati inclusi file/dati binari, ma può anche archiviare molti più dati. IndexedDB costruisce anche indici del suo contenuto per consentire una rapida ricerca nel database.

Casi d'uso per IndexedDB

IndexedDB è essenzialmente un database NoSQL nel browser e può archiviare grandi quantità di dati. Qualsiasi caso d'uso che richiede l'archiviazione di oltre 10 MB di dati è appropriato per IndexedDB.

A differenza delle altre forme di archiviazione del browser, IndexedDB non si limita alla memorizzazione di stringhe. IndexedDB può memorizzare dati di tutti i tipi JavaScript standard. Se crei un'applicazione Web per funzionare principalmente offline, puoi utilizzare IndexedDB per archiviare tutti i dati dell'applicazione.

Lo storage lato client è flessibile e potente

Il termine archiviazione lato client si riferisce alla memorizzazione dei dati dell'applicazione nel browser. Lo storage lato client è essenziale per il funzionamento della maggior parte delle moderne applicazioni web. Esistono vari tipi di archiviazione lato client: cookie, local/sessionStorage e IndexedDB.

Tutti i tipi di archiviazione del browser hanno limiti variabili sulla loro capacità e sul tipo di dati che possono archiviare. I cookie sono il tipo più limitato, local/sessionStorage è il più conveniente e IndexedDB è il più potente.