Explication détaillée des méthodes de stockage HTML5 sessionStorage et compétences du didacticiel localStorage_html5

Par conséquent, sessionStorage n'est pas un stockage local persistant, mais uniquement un stockage au niveau de la session. LocalStorage est utilisé pour le stockage local persistant, à moins que les données ne soient activement supprimées, les données n'expireront jamais.
1. La différence entre le stockage Web et les cookies
Le concept de stockage Web est similaire à celui des cookies, mais la différence est qu'il est conçu pour une plus grande capacité de stockage. La taille du cookie est limitée et le cookie sera envoyé chaque fois que vous demanderez une nouvelle page, ce qui gaspillera de la bande passante. De plus, le cookie doit spécifier une portée et ne peut pas être appelé sur plusieurs domaines.
De plus, Web Storage propose des méthodes setItem, getItem, removeItem, clear et autres. Contrairement aux cookies, les développeurs front-end doivent encapsuler eux-mêmes setCookie et getCookie.
Mais les Cookies sont également indispensables : les cookies sont utilisés pour interagir avec le serveur et existent dans le cadre de la spécification HTTP, tandis que le Web Storage n'est créé que pour "stocker" les données localement (Correction de @otakustay)
2. Prise en charge du navigateur pour le stockage Web HTML5
À l'exception d'IE7 et versions antérieures, les autres navigateurs standard sont entièrement pris en charge (c'est-à-dire que FF doit être exécuté sur le serveur Web), il convient de mentionner qu'IE fait toujours du bien Par exemple, UserData dans IE7 et IE6 est en fait une solution pour le stockage local javascript. Grâce à une simple encapsulation de code, tous les navigateurs peuvent être unifiés pour prendre en charge le stockage Web.
Pour déterminer si le navigateur prend en charge localStorage, vous pouvez utiliser le code suivant :

Copiez le code

Le code est la suivante :

if(window.localStorage){
alert("La navigation prend en charge localStorage")
}
else
{
alert("La navigation ne prend pas en charge localStorage")
}
//ou if(typeof window.localStorage == 'undefined'){ alert("La navigation ne prend pas encore en charge localStorage") }

3. LocalStorage et les opérations de sessionStorage
localStorage et sessionStorage ont les mêmes méthodes de fonctionnement, telles que setItem, getItem et RemoveItem, etc.
Méthodes de localStorage et sessionStorage :
setItem stocke la valeur
Utilisation : Store valeur dans le champ clé
Utilisation : .setItem(key, value)
Exemple de code :

Copier le code

Le code est le suivant :

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

getItem obtient la valeur
Objectif : obtenir la clé spécifiée localement Valeur stockée
Utilisation : .getItem(key)
Exemple de code :

Copier code

Le code est le suivant :

var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");

removeItem delete key
Objectif : supprimer la clé spécifiée, valeur stockée localement
Utilisation : .removeItem(key)
Exemple de code :

Copier le code

Le code est le suivant :

sessionStorage.removeItem("key");
localStorage.removeItem("site");

effacer effacer toutes les clés/valeurs
Objectif : effacer toutes les clés/valeurs
utilisation : .clear()
Exemple de code :

Copier le code

Le code est le suivant :

sessionStorage.clear();
localStorage.clear();

4 .Autres méthodes de fonctionnement : opération de point et []
stockage Web Non seulement vous pouvez utiliser votre propre setItem, getItem, etc. pour un accès pratique, mais vous pouvez également utiliser l'opérateur point (.) et [] pour. stocker les données comme un objet normal, comme le code suivant :

Copier le code

Le code est le suivant :

var storage = window.localStorage; storage.key1 = "bonjour";
storage["key2"] = "world"; console.log(storage["key2"]);

5. localStorage Implémentez le parcours avec les attributs key et length de sessionStorage
La key() et la longueur fournies par sessionStorage et localStorage peut facilement implémenter la traversée des données stockées, comme le code suivant :

Copier le codeLe code est le suivant :

var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i )
{
var key = storage.key( i);
var value = storage.getItem(key);
console.log(key "=" value);
>

6.
Le stockage fournit également des événements de stockage. Lorsque la valeur de la clé change ou est effacée, l'événement de stockage peut être déclenché. Par exemple, le code suivant ajoute un écouteur pour les modifications d'événements de stockage :

Copier le codeLe code est le suivant :

if(window.addEventListener){

window.addEventListener("storage",handle_storage, false);

>
else if(window.attachEvent)
{
window.attachEvent("onstorage",handle_storage
}
function handle_storage(e){ if( !e){e=window.event;}
}

Les attributs spécifiques de l'objet événement de stockage sont les suivants :