recherche

Maison >interface Web >Tutoriel H5 >À propos de la différence entre HTML5 localStorage et sessionStorage

À propos de la différence entre HTML5 localStorage et sessionStorage

jacklove
jackloveoriginal
2018-06-09 13:51:502992parcourir

HTML5 fournit deux méthodes de stockage Web, localStorage et sessionStorage

La différence entre localStorage et sessionStorage

LocalStorage n'a pas de délai d'expiration. Les données seront enregistrées tant qu'elles ne seront pas effacées ou supprimées.

sessionStorage stocke les données d'une session. Le cycle de vie est le même que celui de la session. Lorsque l'utilisateur ferme le navigateur, les données seront supprimées.

Caractéristiques :

1.La capacité prise en charge par défaut de localStorage est d'une station5M, lorsque l'appel de setItem dépasse la limite supérieure, l'exception QuotaExceededError sera déclenchée. Bien entendu, certains navigateurs prennent en charge la modification de la limite supérieure de capacité, mais afin d'être compatible avec d'autres navigateurs, il est préférable d'utiliser la capacité de 5 Mo.

2.localStorage enregistre les données sous la forme de valeur-clé, et la clé et la valeur ne peuvent être qu'au format chaîne. Par conséquent, une fois le nombre 1 enregistré, il sera converti en chaîne 1.

3.LocalStorage peut être écrit et lu des manières suivantes : 

localStorage.name = 'fdipzone';
name = localStorage.name;
localStorage['name'] = 'fdipzone';
name = localStorage['name'];
localStorage.setItem('name', 'fdipzone');
name = localStorage.getItem('name');

localStorage[ La clé ] = La méthode d'écriture de valeur est prise en charge par tous les navigateurs grand public. Le responsable n'a pas indiqué quelle méthode d'écriture est la norme. Mais si vous exécutez le code suivant, localStorage deviendra invalide. 

localStorage.setItem = null;
localStorage.getItem = null;
localStorage.removeItem = null;
localStorage.clear = null;

Par conséquent, il est recommandé d'utiliser setItem(), getItem(), removeItem(), clear() pour implémenter l'écriture, la lecture et suppression, Vide.

4.Si vous souhaitez enregistrer du contenu sans chaîne, il est recommandé d'utiliser JSON pour le traitement. Lors de l'écriture de données, utilisez JSON.stringify pour les convertir en chaîne, et lors de la lecture de données, utilisez JSON.parse pour convertir la chaîne dans le format précédent.

Exemple 1 : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> Local Storage and Session Storage </title>
 </head>
 <body>
  <p>姓名:<input type="text" name="name" id="name"></p>
  <p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
  <p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="removeBtn" value="remove name"> <input type="button" id="clearBtn" value="clear"> </p>
  <script type="text/javascript">
	var oStorage = window.localStorage;
	function $(id){
		return document.getElementById(id);
	}
	// 保存数据
	$(&#39;saveBtn&#39;).onclick = function(){
		oStorage.setItem(&#39;name&#39;, $(&#39;name&#39;).value);
		if($(&#39;gender1&#39;).checked==true){
			oStorage.setItem(&#39;gender&#39;, 1);
		}else if($(&#39;gender2&#39;).checked==true){
			oStorage.setItem(&#39;gender&#39;, 2);
		}
	}
	// 获取数据
	$(&#39;getBtn&#39;).onclick = function(){
		$(&#39;name&#39;).value = oStorage.getItem(&#39;name&#39;);
		if(oStorage.getItem(&#39;gender&#39;)==1){
			$(&#39;gender1&#39;).checked = true;
		}else if(oStorage.getItem(&#39;gender&#39;)==2){
			$(&#39;gender2&#39;).checked = true;
		}
	}
	// 删除数据name
	$(&#39;removeBtn&#39;).onclick = function(){
		oStorage.removeItem(&#39;name&#39;);
	}
	// 清空数据
	$(&#39;clearBtn&#39;).onclick = function(){
		oStorage.clear();
	}
  </script>
 </body>
</html>


Exemple 2 : Utilisation de JSON .stringify et JSON.parse encapsulent les données

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title> Local Storage and Session Storage </title>
 </head>
 <body>
  <p>姓名:<input type="text" name="name" id="name"></p>
  <p>性别:<input type="radio" name="gender" id="gender1" value="1"> 男 <input type="radio" name="gender" id="gender2" value="2"> 女</p>
  <p><input type="button" id="saveBtn" value="save"> <input type="button" id="getBtn" value="get"> <input type="button" id="clearBtn" value="clear"> </p>
  <script type="text/javascript">
	var oStorage = window.localStorage;
	function $(id){
		return document.getElementById(id);
	}
	// 保存数据
	$(&#39;saveBtn&#39;).onclick = function(){
		var name = $(&#39;name&#39;).value;
		var gender;
		if($(&#39;gender1&#39;).checked==true){
			gender = 1;
		}else if($(&#39;gender2&#39;).checked==true){
			gender = 2;
		}
		var data = {};
		data[&#39;name&#39;] = name;
		data[&#39;gender&#39;] = gender;
		oStorage.setItem(&#39;data&#39;, JSON.stringify(data));
	}
	// 获取数据
	$(&#39;getBtn&#39;).onclick = function(){
		var data = JSON.parse(oStorage.getItem(&#39;data&#39;));
		if(data){
			var name = data[&#39;name&#39;];
			var gender = data[&#39;gender&#39;];
			$(&#39;name&#39;).value = name;
			if(gender==1){
				$(&#39;gender1&#39;).checked = true;
			}else if(gender==2){
				$(&#39;gender2&#39;).checked = true;
			}
		}
	}
	// 清空数据
	$(&#39;clearBtn&#39;).onclick = function(){
		oStorage.clear();
	}
  </script>
 </body>
</html>


Écoutez la valeur de localStorage et synchronisez les données de la page lorsque des modifications se produisent

Lors de l'appel de setItem(), removeItem(), clear(), vous pouvez écouter ces événements pour faciliter la mise à jour des données entre les différentes pages. 

// 监听数据变化,当数据发生变化时,同步数据显示
window.onstorage = function(event){
	var status = {}
	status.key = event.key;
	status.oldValue = event.oldValue;
	status.newValue = event.newValue;
	status.url = event.url;
	status.storage = event.storageArea;
	// 执行同步数据处理...
}

Cet article explique la différence entre HTML5 localStorage et sessionStorage Pour plus de contenu connexe, veuillez faire attention au site Web chinois php.

Recommandations associées :

Explication sur la classe de comparaison du contenu des fichiers zip php

Comment obtenir/définir la classe de langue de la page d'accès utilisateur via php

Calculer le chemin relatif entre deux fichiers via Méthode php

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter la fonction shake via HTML5Article suivant：Comment implémenter la fonction shake via HTML5

Articles Liés

Voir plus