Trucsweb.com

Trucsweb.com

HTML

L’optimisation de la programmation Web

RDFFav

HTML5 : Le stockage local ou « Web Storage »

De loin supérieur au fichier témoin, le stockage local est aussi compatible IE8!html5, stockage, sauvegarder, texte completHTML5 : Le stockage local ou « Web Storage »

HTML5 Stockage local

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
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

    8/10 sur 1 revues.
           Visites : 16403 - Pages vues : 16642
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @