Emmagatzematge local¶

Web Storage¶

L'API Web Storage permet emmagatzemar parelles de claus i valors per un domini concret i d'una forma més intuitiva que utilitzant cookies.
L'emmagatzematge d'informació es realitza a través de les propietats localStorage i sessionStorage de l'objecte window, que actuen com a interfície dels objectes Storage associats a un domini.

Les dades de l'emmagatzematge local són específiques al protocol del document.
Així, les dades que es guarden per un domini carregat amb HTTP seran diferents de les guardades pel mateix domini carregat amb HTTPS.

A diferència de les cookies, la informació de l'emmagatzematge local NO s'envia al servidor web en fer peticions HTTP o HTTPS.
Si necessitem disposar de les dades al back-end, cal que les enviem explícitament.

Web Storage API
Storage

Local Storage i Session Storage¶

Les dades que volem conservar es poden emmagatzemar utilitzant qualsevol de les dues propietats:

Amb localStorage les dades es guardaran indefinidament fins que siguin esborrades explícitament.
Amb sessionStorage les dades es guardaran només mentre la pestanya actual del navegador es mantingui oberta.

Múltiples sessions

Si obrim diverses pestanyes o finestres amb la mateixa URL, es crea un sessionStorage diferent per cada pestanya o finestra. En canvi, si dupliquem una pestanya es copia també el contingut del sessionStorage a la nova pestanya.

Capacitat d'emmagatzematge

5MB + 5MB
L'espai d'emmagatzematge per cada domini està limitat a 5MB per cada tipus, de manera que es reparteixen un total de 10MB per cada domini, en contraposició als 4KB que pot emmagatzemar com a màxim una cookie.

	localStorage	sessionStorage	cookies
mida màxima individual	5MB	5MB	1KB
mida màxima total	5MB *	5MB *	4KB
temps de vida	indefinit	sessió actual	fins la data determinada
accessibilitat a les dades	total	només la pestanya actual	total
transferència al servidor	no	no	automàtica amb les capçaleres HTTP/HTTPS
compatibilitat	HTML5	HTML5	HTML4 o superior

* Valors segons l'especificació, però cada navegador pot tenir-ne de diferents per defecte

Window: localStorage property
Window: sessionStorage property

Emmagatzematge¶

Es pot fer amb el mètode setItem(clau, valor) o bé utilitzant la sintaxi d'objectes assignant directament el valor a la clau com si fos una una propietat:

localStorage.setItem("usuari", "Joan");
localStorage.usuari = "Joan";
localStorage["usuari"] = "Joan";

Interfícies de l'API

Tot i que les 3 instruccions anteriors fan exactament el mateix, el mètode que es recomana és utilitzar la interfície integrada de l'API setItem(). El mateix s'aplica a la resta de mètodes d'accés.

Storage: setItem() method

Recuperació¶

Es pot fer amb el mètode getItem() o bé llegint directament el valor de la propietat que representa la clau:

nom = localStorage.getItem("usuari");
nom = localStorage.usuari;
nom = localStorage["usuari"];

Si la clau demanada no conté cap valor el mètode getItem() retorna null, però si es llegeix el valor com a propietat retorna undefined.

Storage: getItem() method

Esborrat¶

Es pot fer amb el mètode removeItem():

nom = localStorage.removeItem("usuari");

No hi ha un mètode equivalent en la notació d'objectes.
Si la clau demanada no existeix, no fa res.

Storage: removeItem() method

Format de les dades¶

L'emmagatzematge local només guarda cadenes de text en format UTF-16.
Qualsevol altre format es converteix automàticament en un String quan s'emmagatzema.

const usuari = { nom: "Joan" };
localStorage.setItem( "dades", usuari );

localStorage.getItem( "dades" ); // ens retornarà "[object Object]"

Si volem guardar qualsevol tipus de dades complex (p.ex. arrays o objectes) primer els hem de serialitzar. Podem fer aquesta operació utilitzant els mètodes stringify() i parse() de l'obecte global estàtic JSON.

const usuari = { nom: "Joan" };
localStorage.setItem( "dades", JSON.stringify( usuari ) );

JSON.parse( localStorage.getItem( "dades" ) ); // ens retornarà { nom: "Joan" }

JSON.stringify()
JSON.parse()

Atributs data-*¶

Els atributs data-* permeten emmagatzemar informació fàcilment accessible des del codi JavaScript en forma de cadenes de text dins dels elements HTML.

Sintaxi¶

Podem afegir els atributs i els seus valors dins les etiquetes HTML.
La sintaxi que cal seguir consisteix en prefixar el nom dels atributs que volem afegir amb data-, i seguidament assignar-los un valor.

<div
  id="article"
  data-referencia="ABCD"
  data-codi-article="1234">
Article 1
</div>

Validació HTML

Com que aquesta sintaxi forma part de l'especificació de HTML5, aquests atributs afegits als elements de la pàgina passen el test de validació HTML del W3C.

Accés a les dades¶

Per recuperar les dades, ho podem fer llegint la propietat dataset de l'element HTML, que retorna un objecte amb les propietats de l'element amb sintaxi camel case:

const element = document.getElementById("article");

element.dataset.referencia; // ABCD
element.dataset.codiArticle; // 1234

Aquestes propietats són de lectura i també d'escriptura.
Si modifiquem la propietat del dataset, també canviarà el valor de l'atribut data-* corresponent.

const element = document.getElementById("article");

element.dataset.referencia = "WXYZ"
element.dataset.codiArticle = "6789"

Using data attributes
data-*