Comment utiliser le stockage Web

Cette fois, je vais vous montrer comment utiliser Web Storage et quelles sont les précautions lors de l'utilisation de Web Storage. Voici des cas pratiques, jetons un coup d'œil.

localStorage-------sessionStorage

Fonctionnalités de stockage Web :

1. -Forme de stockage simple de type Valeur

2. Il peut être lu et écrit sous la même forme que les autres objets javascript ordinaires

3. Grande capacité-->5M (par rapport au cookie)--(le cookie ne fait que 4 Ko et sera apporté lors de l'envoi d'une demande, ce qui affecte la vitesse)

4. Il n'est accessible que s'il provient de la même source

Ce qui suit utilise localStorage comme exemple ----》sessionStorage et localStorage sont fondamentalement les mêmes, mais sessionStorage est en fonction de la session. Disparaît lorsque la fenêtre est fermée. Cependant, localStorage est une donnée stockée localement À moins d'être supprimées via un programme ou manuellement, les données ne seront pas perdues.

est similaire à un objet JavaScript ordinaire, et vous pouvez utiliser des opérations point (.) et des opérations crochets [ ] pour accéder aux propriétés.

Par exemple : localStorage.setItem("foo","1") localStorage.foo="1" localStorage["foo"]="1"

API couramment utilisées : setItem(), getItem(), clear().

Lorsque l'objet est stocké, lors de la lecture et de l'écriture, l'objet doit être converti en JSONstring pour le stockage, et deux fonctions JSON.stringify( sont introduites ) obj), JSON.parse(str)

Par exemple : var obj={x:1,y:2} Stockage : localStorage.obj=JSON.stringify(obj), lire :var obj2=localStorage.parse(localStorage.obj).

Énumération des données : 1. Traversée via la méthode clé et l'attribut de longueur 2. pour dans la traversée

1 : for (var i= 0; i

2 : for (var key in localStorage){ if(localStorage.hasOwnProperty(key)){var value=localStorage[key]; console.log(key+":"+value);} }

Événement de stockage

Après qu'une fenêtre modifie les données du stockage Web, l'événement de stockage est déclenché dans toutes les fenêtres sauf la fenêtre où les données sont modifiées.

window.addEventListener('storage',function(event){ console.log(event.key) }.false);

Ce qui suit répertorie plusieurs attributs couramment utilisés des objets d'événement événement.

key (nom de clé mis à jour), oldValue (valeur avant mise à jour), newValue (valeur après mise à jour), url (url de la page mise à jour)

Gestion de l'espace de noms ----Étant donné que les données de localStorage disparaîtront automatiquement si elles sont incorrectes, si trop d'attributs sont ajoutés sans discernement, la gestion ultérieure deviendra très difficile. Nous pouvons le gérer via des espaces de noms.

	var serviceName="SERVICENAME",storage=null;
	//通过load事件读取数据至本地变量
	window.onload=function(){
		try{
			storage=JSON.parse(localStorage[serviceName] || '{}');
		}catch{
			storage={};
		}
	}
	//通过onbeforeunload时间将数据写入localStorage
	window.onbeforeunload=function(){
		localStorage[serviceName]=JSON.stringify(storage)
	}1. Écrivez les données localStorage dans le stockage de variables local, puis y accéder sera plus rapide que d'accéder à localStroage. 


2. Différentes pages ou modules sont nommés avec des noms de service différents pour éviter les conflits de noms d'attributs 
3 Puisqu'une page ne lit et n'écrit localStorage qu'une seule fois, donc. l'événement de stockage ne peut pas être déclenché sur la page. Par conséquent, lorsque cela est nécessaire, nous devons encapsuler des méthodes pour mettre à jour les données de localStorage ou synchroniser les données d'autres onglets. 
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php ! 
Lecture recommandée : 

Comment utiliser Yuansheng CSS3 pour implémenter la barre de progression de chargement en anneau

Comment accéder aux propriétés et méthodes des objets JS
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!