Heim > Artikel > Web-Frontend > Über den Unterschied zwischen HTML5 localStorage und sessionStorage

Über den Unterschied zwischen HTML5 localStorage und sessionStorage

jackloveOriginal: 2018-06-09 13:51:502887Durchsuche

HTML5 bietet zwei Webspeichermethoden, localStorage und sessionStorage

Der Unterschied zwischen localStorage und sessionStorage

LocalStorage hat keine Ablaufzeit. Die Daten werden gespeichert, solange sie nicht gelöscht oder entfernt werden.

sessionStorage speichert Daten für eine Sitzung. Der Lebenszyklus ist der gleiche wie der der Sitzung. Wenn der Benutzer den Browser schließt, werden die Daten gelöscht.

Eigenschaften:

1.Die standardmäßig unterstützte Kapazität von localStorage ist eine Station5M: Wenn der Aufruf von setItem die Obergrenze überschreitet, wird die Ausnahme QuotaExceededError ausgelöst. Natürlich unterstützen einige Browser das Ändern der Obergrenze der Kapazität, aber um mit anderen Browsern kompatibel zu sein, ist es am besten, die 5-Megapixel-Kapazität zu verwenden.

2.localStorage speichert Daten in Form von Schlüsselwert, und Schlüssel und Wert können nur im Zeichenfolgenformat vorliegen. Daher wird die Nummer 1 nach dem Speichern in eine Zeichenfolge 1 umgewandelt.

3.Die Schreib- und Lesemethoden von localStorage sind wie folgt:

localStorage.name = &#39;fdipzone&#39;;
name = localStorage.name;
localStorage[&#39;name&#39;] = &#39;fdipzone&#39;;
name = localStorage[&#39;name&#39;];
localStorage.setItem(&#39;name&#39;, &#39;fdipzone&#39;);
name = localStorage.getItem(&#39;name&#39;);

localStorage[key] Das = Die Schreibmethode für Werte wird von allen gängigen Browsern unterstützt, der Beamte hat jedoch nicht angegeben, welche Schreibmethode der Standard ist. Wenn Sie jedoch den folgenden Code ausführen, wird localStorage ungültig.

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

Daher wird empfohlen, setItem(), getItem(), removeItem(), clear() zu verwenden, um das Schreiben, Lesen, Löschen und Löschen zu implementieren .

4.Wenn Sie Nicht-String-Inhalte speichern möchten, empfiehlt es sich, JSON für die Verarbeitung zu verwenden. Verwenden Sie beim Schreiben von Daten JSON.stringify, um sie in eine Zeichenfolge umzuwandeln, und beim Lesen von Daten verwenden Sie JSON.parse, um die Zeichenfolge in das vorherige Format zu konvertieren.

Beispiel 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>

Beispiel 2: Verwendung von JSON.stringify Kapseln Sie Daten mit JSON.parse

<!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>

Überwachen Sie den Wert von localStorage und synchronisieren Sie Seitendaten, wenn Änderungen auftreten

Wenn Sie setItem(), removeItem(), clear() aufrufen, können Sie diese Ereignisse abhören, um die Datenaktualisierung zwischen verschiedenen Seiten zu erleichtern.

// 监听数据变化,当数据发生变化时,同步数据显示
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;
	// 执行同步数据处理...
}

In diesem Artikel wird der Unterschied zwischen HTML5 localStorage und sessionStorage erläutert. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Erklärung zum Inhaltsvergleichskurs für PHP-Zip-Dateien

So erhalten/setzen Sie die Sprachklasse der Benutzerzugriffsseite über PHP

Berechnen Sie den relativen Pfad zwischen zwei Dateien durch PHP-Methode

Das obige ist der detaillierte Inhalt vonÜber den Unterschied zwischen HTML5 localStorage und sessionStorage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die Shake-Funktion über HTML5Nächster Artikel：So implementieren Sie die Shake-Funktion über HTML5

In Verbindung stehende Artikel

Mehr sehen