Angular: utilizzare il local storage di HTML 5

Una delle novità di HTML 5 è la creazione di uno spazio di immagazzinamento nel browser. Questo spazio, che ha dimensione minima di 5 Mb, può contenere dati nel formato chiave-valore, dove il valore può essere di qualunque tipo permesso.

Angular può sfruttare questa caratteristica per salvare dati localmente nel browser per poi poterli richiamare e manipolare a piacere. Per far questo si crea si utilizza il metodo factory di Angular che ci permette di utilizzare l’oggetto di HTML 5 e iniettarlo nel nostro codice:

Le tre funzioni rispettivamente salvano, rimuovono e caricano il dato dallo storage.

A questo punto basta inserire il codice nell’applicazione, caricare AngularJS, per utilizzare questa funzionalità nel nostro sito, di seguito un esempio:

Una nota su Local storage: i dati salvati sono all’interno del browser e sono accessibili senza restrizioni dal browser stesso, qualunque applicazione che usi una chiave salvata avrà accesso ai dati legati a quella chiave.

Se doveste aver bisogno di dati più volatili HTML 5 offre Session storage che funziona nello stesso modo di Local storage ma viene azzerato alla fine di ogni sessione.