HTML

L’optimisation de la programmation Web

HTML5 : Le stockage local ou « Web Storage »

Supérieur au fichier témoin, le stockage local HTML5 du groupe WHATWG est une application Web qui permet, comme le nom l’indique, de stocker localement des données sur la machine de l’usager.

Avant le HTML5, le stockage local était limité au vulnérable fichier témoin de l’entête HTTP. À la merci des attaques Cross-Site Scripting (XSS). Le « stockage local » est plus sécuritaire tout en permettant de stocker un plus grand nombre de données sans affecter le site web.

Le stockage local se fait par domaine et protocole. Protocole justement pour éviter des connexions de type irc etc... En d’autres mots https://votresite.com et http://votresite.com sont deux sites différents. Tout comme www.votresite.com et votresite.com d’ailleurs. Et donc toutes les pages de même domaine/protocole d’origine peuvent stocker et accéder aux mêmes données.

Combiné avec les manifestes de l’ « Application Cache » qui permet de créer des sites Web hors ligne en stockant cette fois des fichiers et des pages Web, le stockage local permet de stocker des données dynamiques, en attendant une connexion pour mettre au parfum le pauvre serveur devenu inutile. Enfin, c’est une façon de voir. Certain y voient une faille de sécurité et prône le no-javascript. La sécurité n’est pas en cause quand on sait comment se protéger, du moins éviter de s’exposer. Mais il n’est vrai qu’à force de voir des injections de code malicieux un peu partout, la consigne est de désactiver le JavaScript !

L’intérêt reste est de pouvoir l’utiliser quand ses disponibles!

Des heures de plaisir!

Compatibilité

Depuis la version Internet Explorer 8, c’est dire avant le HTML5! Et avant la WHATWG! Si Firefox 3.5, Chrome et safari 4 sont compatible, Opera a dû attendre la version 11.5! On peut aisément affirmer que le stockage local est maintenant compatible.

Exemple de la W3C :

if(typeof(Storage) !== "undefined") {
    // Stocker
   localStorage.setItem("nom", "Smith");
} else {
    // Désolé votre navigateur ne supporte pas le stockage local...
}

// Récupérer les données
localStorage.getItem("nom"); 

// Détruire les données
localStorage.removeItem("nom");

// Ou en programmation objet :

// Stocker
localStorage.nom = "Smith";

Example pour compter les clics :

if (localStorage.compteclic) {
    localStorage.compteclic = Number(localStorage.compteclic) + 1;
} else {
    localStorage.compteclic = 1;
}
document.getElementById("oResulta").innerHTML = "Vous avez cliquer le bouton " + localStorage.compteclic + " fois.";

<span id="oResultat"></span>

L’objet « sessionStorage »

À la manière de l’objet « localStorage », l’objet « sessionStorage » stocke les données localement mais seulement pendant une session. Les données seront ensuite détruit lorsque l’usager fermera la fenêtre ou l’onglet du navigateur.

if (sessionStorage.compteclic) {
    sessionStorage.compteclic = Number(sessionStorage.compteclic) + 1;
} else {
    sessionStorage.compteclic = 1;
}
document.getElementById("oResulta").innerHTML = "Vous avez cliquer le bouton " + sessionStorage.compteclic + " fois durant cette session.";

<span id="oResultat"></span>

Ressources et exemples

• WHATWG - Web storage
• Alsacréations - Stockage des données locales : Web Storage
• Comprendre le storage en HTML5 par Jérome Debray
• Dive into HTML5: Storage par Mark Pilgrim
• Mozilla Developer Center : DOM Storage
• Mozilla Developer Center : IndexedDB
• Mozilla Hacks : offline web applications
• Mozilla Hacks : Beyond HTML5 : Database APIs and the Road to IndexedDB
• Mobile Gmail
• HTML5 Demos: Storage
• Synchronization with localStorage
• Timer demo
• W3C - HTML5 Local Storage