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 des données localement dans le navigateur de l'utilisateur.

Avant HTML5, les données de l'application 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 de grandes quantités de données localement sans affecter les performances du site.

Contrairement aux cookies, les limitations 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.

Support du navigateur

Le tableau dans le tableau indique 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

Objet HTML Storage local

HTML Storage local 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 l'onglet du navigateur est fermé)

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 par vous-même

Explication de l'exemple :

  • Créer un nom/valeur pair localStorage, où : name="lastname", value="Gates"
  • Récupérer la valeur de "lastname" et l'insérer dans l'élément 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 le comptage est incrémenté 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 par 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 l'onglet 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 par vous-même