Web Storage

1 Gen

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 1 gennaio 2012). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

La memorizzazione persistente di informazioni in locale è una delle aree in cui le applicazioni client native hanno sempre avuto un vantaggio rispetto applicazioni web. Con le prime infatti possiamo eseguire la memorizzazione nella più svariate maniere: registro di sistema, files INI, files XML, base di dati etc…
HTML5 Web Storage (Dom Storage) è un modo per i siti web di memorizzare informazioni sul computer dell’utente e recuperarle più tardi. Il concetto è simile a quello dei cookies, con la differenza che è stato concepito per grosse quantità di informazioni.

Il Web Sotorage fa parte di HTML5?

La risposta è si, il motivo per cui sia stato inserito in una specifica separata, deriva dal fatto che molte persone nel gruppo di lavoro di HTML5, sostenevano che HTML5 fosse troppo grande. Difatti in origine il Web Storage faceva parte dell’HTML5 specification.

Supporto

Lo standard è supportato da tutti i moderni browser, possiamo tuttavia testarlo attraverso JavaScript e la feature detection. Se il browser supporta HTML5 Storage esisterà una proprietà localStorage nell’oggetto globale window, altrimenti la proprietà sarà undefined:

Possiamo anche utilizzare la libreria Modernizr per testarne il supporto:

Attenzione, JavaScript è case-sensitive, L’attributo di Modernizr è chiamato localstorage tutto minuscolo mentre la proprietà del DOM si chiama window.localStorage (mixed case).

Ie Firefox Chrome Safari Opera Android Iphone
8+ 3.5 4.0+ 4.0+ 10.5+ 2.0+ 2.0+

Sicurezza

Visto che le informazioni sono memorizzate sul nostro computer, chiunque ha accesso fisico ad esso potrà probabilmente visionare ed anche modificare il database.
Inoltre qualsiasi sito è in grado di leggere e modificare i propri valori, ma non potrà accedere ai valori memorizzati da altri siti (come per i cookies) , vedere a riguardo: same-origin restriction.
Un’altra cosa da tenere in considerazione è che i dati sono memorizzati in chiaro e non criptati.

Local Storage

I cookies sono limitati nelle dimensioni (circa 4 kb), ed hanno lo spiacevole difetto di essere inviati dal browser al server ogni volta che viene richiesta una nuova pagina, comportando perdite di tempo. Infatti ogni richiesta HTTP comporta l’inutile trasmissione dei soliti dati più e più volte, inoltre questi dati sono inviati in chiaro su Internet (a meno che non si usi il protocollo HTTPS).
I dati del Local Storage, si trovano nel nostro pc, ed i server web potranno accedervi attraverso JavaScript solo se esplicitamente richiesto (molto meglio direi). Inoltre le specifiche del W3C indicano una dimensione limite di 5MB per ogni sito (dominio). Limite che è stato incredibilmente recepito all’unisono (almeno fino ad ora) da tutti i browsers.

Possiamo memorizzate i dati attraverso un nome di chiave che poi utilizzeremo per recuperare gli stessi. La chiave deve essere una stringa mentre i dati di qualsiasi tipo supportato da JavaScript.

Memorizzare un’informazione

Per la memorizzazione ci serviremo del metodo setItem() oppure possiamo direttamente manipolare l’oggetto come un array associativo.

Attenzione setItem() se richiamto su una chiave esistente andrà in modifica della stessa.

Recuperare un’informazione

Per recuperare i dati salvati utilizzeremo il metodo getItem() oppure possiamo ancora trattare l’oggetto come un array.

Da tenere presente che getItem() se chiamato su una chiave inesistente restituirà undefined piuttosto che generare un’eccezzione.
Attenzione, qualsiasi dato venga archiviato nel “deposito” sarà convertito in stringa attraverso il metodo .toString() prima di essere memorizzato. Dovremo quindi usare tecniche come la serializzazione JSON, per salvare e recuperare oggetti od array, oppure funzioni come parseInt() o parseFloat() per forzare il recupero di valori numerici.

Nota: Anche se i valori possono essere settati e recuperati attraverso proprietà standard JavaScript, i metodi setItem() e getItem() sono raccomandati.

Rimozione chiavi

Per rimuovere una chiave possiamo usare il metodo removeItem(). Questo metodo se applicato su una chiave inesistente non farà niente. Il metodo clear() svuota l’intera area dello storage.

Ciclare sulle chiavi

Le API ci forniscono anche una proprietà lenght che restituisce il numero di chiavi memorizzate e un metodo key() che ritorna il nome di un chiave specifica e prende come parametro un intero.

Nota: Quando un browser va in modalità privata/anonima/incognito (brutalmente chiamata anche modalità porno) verrà creato un nuovo database temporaneo, che verrà distrutto quando la modalità sarà chiusa. Questo rende in pratica il Local Storage simile al Session Storage.

Session Storage

Il Session Storage fa parte della specifica del Web Storage. Esso fornisce un’API praticamente identica al Local Storage, ma cambia il criterio di conservazione delle informazioni. Come suggerisce il nome il valori nel Session Storage “dovrebbero” sopravvivere solo per una singola sessione del browser (non del server), la cui terminazione di solito avviene quando la finestra del browser viene chiusa.
Attenzione, c’è però un’eccezione.
Quando un browser esegue un “Ripristino della sessione” funzione, generalmente progettata per aiutare gli utenti a recuperare velocemente i tabs aperti dopo un crash del browser o del computer, i valori in Session Storage verranno ripristinati. Così, mentre avremo una nuova sessione sul server, dal punto di vista del browser, è una continuazione della sessione precedente.

L’oggetto sessionStorage si rivela molto utile per agganciarlo ai dati temporanei che devono essere salvati e ripristinati (es. un modulo utente) se il browser è accidentalmente aggiornato oppure va in crash, anche se in quest’ultimo caso i moderni browser prevedono già un ripristino delle informazioni.

Firefox 3.5

Prima di Firefox 3.5, i dati dell’oggeto sessionStorage non è venivano automaticamente ripristinati dopo un recupero da un crash del browser. A partire da Firefox 3.5, questo funziona come da specifica.

L’evento Storage

E’ innescato quando uno storage cambia, ed è valido per sia per il session che per il local storage. Naturalmente la sua gestione non è obbligatoria, anzi, esso rappresenta una semplice notifica che è avvenuto qualcosa nello Storage.
L’evento storage è supportato ovunque sia supportato l’oggetto localStorage (e sessionStorage), quindi anche su IE8. Bene com’è noto IE8 (e versioni precedenti) non supportano il metodo standard W3C per la gestione degli eventi addEventListener(), quindi dovremo fixare la situazione nel classico modo.

A questo punto, la variabile event che contiene l’oggetto StorageEvent avrà le seguenti proprietà:

Attributo Tipo Descrizione
key string Rappresenta la chiave modificata. L’attributo è null nel caso l’evento sia stato invocato dal metodo clear(). Read only
oldValue string Il precedente valore oppure null quando l’evento è stato invocato dal metodo clear() o nel caso si tratti della creazione di una nuova chiave. Read only
newValue string Il nuovo valore oppure null quando l’evento è stato invocato dal metodo clear() o la chiave è stata rimossa dallo storage. Read only
url string La pagina che ha chiamato il metodo che ha scatenato l’evento. Read only
storageArea object Rappresenta l’oggetto Storage che è stato colpito. Read only

Tools

Possiamo “maneggiare” i nostri Web Storage attraverso utili e comodi strumenti che non solo ci consentono di poterli visualizzare facilmente, ma anche poterne modificare e rimuovere le chiavi. Al momento abbiamo le seguenti possibilità:

  1. Per Firefox possiamo utilizzare l’estensione Foundstone HTML5 Local Storage Explorer scaricabile a questo indirizzo. L’estensione vale solo per il local storage.
  2. Chrome invece ci permette di accedere sia al local che al session storage attraverso i suoi developer tools, basta andare sulla scheda Resources. (Stesso discorso per il Web Inspector di Safari).
  3. Per Opera posiamo utilizzare Opera Dragonfly che ora è integrato nel browser, ed andare sulla scheda Archivi.

Risorse

http://dev.w3.org/html5/webstorage/
http://en.wikipedia.org/wiki/Web_Storage

Lascia un commento