Stockage web local

Le stockage web local ou stockage DOM (Document Object Model), ou encore localStorage, est une technique d'enregistrement de données dans un navigateur web. Le stockage web local permet l'enregistrement persistant, comme avec les cookies mais avec une capacité bien plus grande, et sans avoir à rajouter de données dans l'entête de requête HTTP.

Il existe deux types de stockage web local : le stockage local et le stockage de session, équivalant respectivement aux cookies persistants et aux cookies de session^[1].

Contrairement aux cookies, les données en localStorage ne sont pas transmises automatiquement dans un en-tête à chaque requête HTTP réalisée vers le serveur. Elles sont conservées localement par le navigateur et sont accessibles avec une API JavaScript.

API localStorage

L'API JavaScript permet la sauvegarde de couples clé-valeur, les clés et valeurs étant obligatoirement des chaînes de caractères (string). Des objets peuvent être stockés après conversion en string avec par exemple JSON.stringify(object) puis restaurés depuis une string avec JSON.parse(str).

Principales méthodes de l'API (localStorage implémente l'interface Storage) :

• localStorage.setItem(key, value) pour associer value à key
• let a = localStorage.getItem(key) pour récupérer la valeur associée à key (retourne null si la clé n'est pas présente)
• localStorage.removeItem(key) pour supprimer une correspondance
• localStorage.clear() pour effacer toutes les clés
• localStorage.length renvoie le nombre de clés stockées
• localStorage.key(i) renvoie la clé d'indice n (n étant compris entre 0 et localStorage.length - 1)

Ces méthodes peuvent également être utilisées avec sessionStorage qui implémente également l'interface Storage ; contrairement à localStorage, sessionStorage réalise un stockage transitoire qui expire lorsque le navigateur est fermé.

Limite de taille

La taille des cookies est limitée à 4 ko. Celle du localStorage dépend des navigateurs :

Navigateur	Taille du localStorage
Opera 10.50+	5 Mo[2]
Safari 8	5 Mo[3]
Firefox 34	10 Mo[3] (anciennement 5 Mo par origine en 2007[4])
Google Chrome	10 Mo par origine[5]
Internet Explorer	10 Mo par aire de stockage[6]

Références

1. (en) Michael Mahemoff, « "Offline": What does it mean and why should I care? », 2 août 2010
2. « Dev.Opera — Web Storage: Easier, More Powerful Client-Side Data Storage », sur dev.opera.com
3. Eiji Kitamura Published: January 28th, 2014 Updated: January 28th et 2014 Comments: 0 Your browser may not support the functionality in this article, « Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks », sur HTML5 Rocks - A resource for open web HTML5 developers
4. John Resig: DOM Storage. John Resig, ejohn.org. Retrieved on 2011-06-12.
5. « Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review », sur chromiumcodereview.appspot.com
6. Introduction to Web Storage. Microsoft Developer Network, msdn.microsoft.com. Retrieved on 2014-08-05.

• Portail de la programmation informatique