首頁 > 文章 > web前端 > 關於HTML5 localStorage and sessionStorage 之間的差異

關於HTML5 localStorage and sessionStorage 之間的差異

jacklove原創: 2018-06-09 13:51:502887瀏覽

HTML5 提供兩種web存儲方法，localStorage 與sessionStorage

#localStorage 與sessionStorage 區別

#localStorage沒有過期時間，只要不clear或remove，資料就會一直保存。 sessionStorage 針對一個session進行資料存儲，生命週期與session相同，當使用者關閉瀏覽器後，資料將被刪除。

特點：

#1.localStorage 預設支援的容量為一個站5M，當呼叫setItem超過上限時，就會觸發

QuotaExceededError

異常。當然有些瀏覽器支援修改容量上限，但為了相容其他瀏覽器，最好以5M的容量來使用。

2.localStorage 是以key-value形式儲存資料的，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 and sessionStorage 之間的區別，更多相關內容請關注php中文網。 ############相關推薦：############關於php zip檔內容比較類別的講解############## #######如何透過php 取得/設定使用者存取頁面語言類別######################透過php 計算兩個檔案之間的相對路徑方法###############

以上是關於HTML5 localStorage and sessionStorage 之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何透過html5實現搖一搖的功能下一篇：如何透過html5實現搖一搖的功能

看更多