Explication détaillée des méthodes de stockage HTML5 sessionStorage et localStorage

Cet article présente principalement l'explication détaillée des méthodes de stockage HTML5 sessionStorage et localStorage. Il a une certaine valeur de référence. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Le stockage Web en HTML5 en comprend deux. méthodes de stockage : sessionStorage et localStorage. sessionStorage est utilisé pour stocker localement les données dans une session. Ces données ne sont accessibles que par les pages de la même session et les données seront détruites à la fin de la session. 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, d'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("浏览支持localStorage") 
}
else
{    
    alert("浏览暂不支持localStorage") 
} 
//或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage") }

3. Opérations LocalStorage et 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
Objectif : stocker la valeur dans le champ clé
Utilisation : .setItem(key, value)
Exemple de code :

Copiez le code

Le code est le suivant :

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

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

Copier le code

Le code est le suivant :

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

removeItem Supprimer la clé
Objectif : Supprimer la valeur stockée localement de la clé spécifiée
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
Utilisation : 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 ponctuelle et []
Le stockage Web peut non seulement utiliser son propre setItem, getItem, etc. pour un accès pratique, mais peut également utiliser l'opérateur point (.) et [] comme les objets ordinaires Stockage de données, comme le code suivant :

Copiez le code<.>

Le code est le suivant :

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

5 Les attributs key et length de localStorage et sessionStorage implémentent le parcours
La clé. () et la longueur fournie par sessionStorage et localStorage peuvent facilement implémenter le parcours des données stockées, comme le code suivant :

Copier le code

Le code est la suivante :

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. Événement de stockage
Le stockage fournit également un événement de stockage, lorsque la valeur de la clé change ou s'efface, l'événement de stockage peut être déclenché par exemple. le code suivant ajoute un écouteur pour le changement d'événement de stockage :

Copier le code

Le 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 :

Property	Type	Description
key	String	The named key that was added, removed, or moddified
oldValue	Any	The previous value(now overwritten), or null if a new item was added
newValue	Any	The new value, or null if an item was added
url/uri	String	The page that called the method that triggered this change

Recommandations associées :

Résumé de toutes les balises HTML5 et explication de la signification des balises

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!