Stockage local HTML

Stockage local HTML : supérieur aux cookies.

Qu'est-ce que le stockage local HTML ?

Grâce au stockage local (Local Storage), les applications web peuvent stocker localement les données dans le navigateur de l'utilisateur.

Avant HTML5, les données des applications ne pouvaient être stockées que dans les cookies, y compris chaque requête du serveur. Le stockage local est plus sûr et peut stocker une grande quantité de données localement sans affecter les performances du site.

Contrairement aux cookies, les limites de stockage sont beaucoup plus grandes (au moins 5 MB), et les informations ne sont pas transmises au serveur.

Le stockage local passe par l'origine (origin) (par le domaine et le protocole). Tous les pages, à partir de l'origine, peuvent stocker et accéder aux mêmes données.

Prise en charge du navigateur

Les tableaux dans le tableau indiquent la version du navigateur qui prend en charge pleinement le stockage local.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Objets Local Storage HTML

HTML Local Storage fournit deux objets pour stocker des données sur le client :

  • window.localStorage - stocke des données sans date d'expiration
  • window.sessionStorage - stocke des données pour une session (les données sont perdues lorsque la fenêtre du navigateur est fermée)

Lors de l'utilisation du stockage local, veuillez vérifier la prise en charge du navigateur pour localStorage et sessionStorage :

if (typeof(Storage) !== "undefined") {
    // Code pour localStorage/sessionStorage
} else {
    // Désolé ! Web Storage n'est pas pris en charge ..
}

Objet localStorage

L'objet localStorage stocke des données sans date d'expiration. Les données ne sont pas supprimées lorsque le navigateur est fermé et sont disponibles le lendemain, la semaine ou l'année suivante.

Exemple

// Stocker
localStorage.setItem("lastname", "Gates");
// Récupérer
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Essayer vous-même

Explication de l'exemple :

  • Créer une paire nom/valeur pour localStorage, où : name="lastname", value="Gates"
  • Récupérer la valeur de "lastname" et l'insérer dans l'élément de l'ID "result"

L'exemple précédent peut également être écrit ainsi :

// Stocker
localStorage.lastname = "Gates";
// Récupérer
document.getElementById("result").innerHTML = localStorage.lastname;

La syntaxe pour supprimer l'élément localStorage "lastname" est la suivante :

localStorage.removeItem("lastname");

Remarque : les paires nom/valeur sont toujours stockées sous forme de chaîne. Si nécessaire, n'oubliez pas de les convertir dans d'autres formats !

L'exemple suivant compte le nombre de clics de l'utilisateur sur le bouton. Dans le code, la chaîne de valeur est convertie en nombre et l'incrémentation du compteur est effectuée en conséquence :

Exemple

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Vous avez cliqué sur ce bouton " +
localStorage.clickcount + " fois.";

Essayer vous-même

Objet sessionStorage

L'objet sessionStorage est équivalent à l'objet localStorage, mais avec la différence qu'il ne stocke les données que pour une session. Si l'utilisateur ferme une étiquette spécifique du navigateur, les données seront également supprimées.

L'exemple suivant compte les clics de l'utilisateur sur le bouton dans la session actuelle :

Exemple

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Dans cette session, vous avez cliqué sur ce bouton " +
sessionStorage.clickcount + " fois.";

Essayer vous-même