ホームページ > 記事 > ウェブフロントエンド > HTML5のlocalStorageとsessionStorageの違いについて

HTML5のlocalStorageとsessionStorageの違いについて

jackloveオリジナル: 2018-06-09 13:51:502949ブラウズ

HTML5 は、localStorage と sessionStorage という 2 つの Web ストレージメソッドを提供します

localStorage と sessionStorage の違いには、クリアまたは削除されない限り、データは保存されます。

sessionStorage はセッションのデータを保存します。ライフサイクルはユーザーがブラウザを閉じると削除されます。

機能:

1. localStorage のデフォルトでサポートされる容量は 1 ステーション

で、setItem の呼び出しが上限を超えると、QuotaExceededError 例外がトリガーされます。もちろん、一部のブラウザーは容量の上限の変更をサポートしていますが、他のブラウザーとの互換性を確保するには、5M の容量を使用するのが最善です。 2.localStorage はデータを

key-value

の形式で保存し、キーと値は文字列形式のみにすることができます。したがって、数値 1 は保存後、文字列 1 に変換されます。 3.localStorageには以下の書き込み方法と読み取り方法があります:

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] = valueの書き込み方法は主流のブラウザでサポートされており、公式はどの書き込み方法が標準であるかを明言していません。ただし、次のコードを実行すると、localStorage が無効になります。

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

したがって、書き込み、読み取り、削除、クリアを実装するには、setItem()、getItem()、removeItem()、clear()を使用することをお勧めします。

4.文字列以外のコンテンツを保存したい場合は、処理に JSON を使用することをお勧めします。データを書き込むときは

JSON.stringify

を使用して文字列に変換し、データを読み取るときは JSON.parse を使用して文字列を前の形式に変換します。例 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>

例 2:

JSON.stringify と 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>

localStorage の値をリッスンして同期する変更時にページデータを同期するsetItem()、removeItem()、clear() を呼び出すときに、これらのイベントをリッスンして、異なるページ間のデータ更新を容易にすることができます。

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

この記事では、HTML5 localStorage と sessionStorage の違いについて説明します。その他の関連コンテンツについては、php 中国語 Web サイトを参照してください。

HTML5のlocalStorageとsessionStorageの違いについて

関連記事