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

Commentaire: Le stockage Web dans HTML5 comprend deux méthodes de stockage: SessionStorage et LocalStorage. SessionStorage est utilisé pour stocker les données d'une session localement, qui ne peut être accessible que sur des pages de la même session et les données seront détruites après la fin de la session.

1. La différence entre le stockage Web et les cookies

Le concept de stockage Web est similaire aux cookies, la différence est qu'elle est conçue pour un stockage de plus grande capacité. La taille du cookie est limitée, et chaque fois que vous demandez une nouvelle page, le cookie sera envoyé, ce qui gaspille de manière invisible la bande passante. De plus, le cookie doit être spécifié de portée et ne peut pas être appelé dans les domaines.

En outre, le stockage Web a SetItem, GetItem, Retiritem, Clear et d'autres méthodes. Contrairement aux cookies, les développeurs frontaux doivent encapsuler les set cookies et les objets eux-mêmes.

Mais les cookies sont également indispensables: la fonction des cookies est d'interagir avec le serveur et existe dans le cadre de la spécification HTTP, tandis que le stockage Web n'est créé que pour stocker les données localement (correction à partir de @otakustay)

2. Le navigateur prend en charge l'état du stockage Web HTML5

À l'exception de IE7 et ci-dessous, d'autres navigateurs standard le prennent entièrement en charge (IE et FF doivent s'exécuter sur le serveur Web). Il convient de mentionner que IE fait toujours de bonnes choses. Par exemple, UserData dans IE7 et IE6 est en fait une solution pour le stockage local de JavaScript. Grâce à l'encapsulation de code simple, il peut être unifié à tous les navigateurs qui prennent en charge le stockage Web.

Pour déterminer si le navigateur prend en charge LocalStorage, vous pouvez utiliser le code suivant:

alert ("parcourir le support localstorage")

}

autre

{

alert ("La navigation ne prend pas en charge Localstorage")

}

// ou if (typeof window.LocalStorage == 'Undefined') {alert ("La navigation ne prend pas en charge Localstorage")}

3. Opérations locales et sessionnstorage

LocalStorage et SessionStorage ont tous deux les mêmes méthodes de fonctionnement, telles que SetItem, GetItem et RemoveItem, etc.

Méthodes de LocalStorage et SessionStorage:

Valeur de stockage setItem

Objectif: Valeur du magasin dans le champ clé

Utilisation: .setItem (clé, valeur)

Exemple de code:

localStorage.SetItem ("Site", "JS8.in");

getItem obtenir de la valeur

Objectif: Obtenez la valeur stockée localement dans la touche spécifiée

Utilisation: .getItem (clé)

Exemple de code:

var site = localStorage.getItem ("site");

Supprimer la touche de suppression

Objectif: Supprimer la valeur stockée localement dans la touche spécifiée

Utilisation: .reMoveItem (clé)

Exemple de code:

localStorage.RemoveItem ("site");

Effacer toute la clé / valeur

Objectif: effacer toutes les clés / valeurs

Utilisation: .Clear ()

Exemple de code:

localStorage.Clear ();

4. Autres méthodes de fonctionnement: Fonctionnement du point et []

Le stockage Web peut non seulement utiliser son propre setItem, getItem, etc. pour faciliter l'accès, mais également utiliser l'opérateur DOT (.) Et [] Méthode pour stocker des données comme les objets ordinaires, comme le code suivant:

var Storage = Window.LocalStorage; Storage.Key1 = "Hello";

stockage ["key2"] = "monde";

console.log (Storage.Key1);

console.log (stockage ["key2"]);

5. Les propriétés de clé et de longueur de LocalStorage et SessionStorage sont mises en œuvre pour traverser

Key () et la longueur fournis par SessionStorage et LocalStorage peuvent facilement implémenter une traversée de données stockée, telle que le code suivant:

var Storage = Window.LocalStorage;

for (var i = 0, len = Storage.length; i <len; i ++)

{

var key = Storage.Key (i);

var valeur = Storage.GetItem (clé);

console.log (clé + "=" + valeur);

}

6. Événements de stockage

Le stockage offre également des événements de stockage. Lorsque la valeur de clé change ou efface, l'événement de stockage peut être déclenché. Par exemple, le code suivant ajoute une écoute pour les modifications des événements de stockage:

window.addeventListener ("stockage", manche_storage, false);

}

else if (window.attachevent)

{

window.attachevent ("Onstorage", manche_storage);

}

Fonction Handle_storage (e) {

if (! e) {e = window.event;}

}

Les propriétés spécifiques de l'objet de l'événement de stockage sont les suivantes:

PropertyTypedescription

touche la clé nommée qui a été ajoutée, supprimée ou modifiée

OldValueany la valeur précédente (désormais écrasée) ou null si un nouvel élément était ajouté

newvalueany la nouvelle valeur, ou null si un article a été ajouté

URL / URIRSTRING la page qui a appelé la méthode qui a déclenché ce changement