HTML5 localStorage and sessionStorage

時間 2019-11-29

標籤 html5 html localstorage sessionstorage 欄目 HTML5 简体版

原文原文鏈接

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

localStorage 與 sessionStorage 差異
html

localStorage沒有過時時間。僅僅要不clear或remove。數據會一直保存。java

sessionStorage 針對一個session進行數據存儲，生命週期與session一樣，當用戶關閉瀏覽器後，數據將被刪除。web

特色：
瀏覽器

1.localStorage 默認支持的容量爲一個站5M，當調用setItem超過上限時。會觸發QuotaExceededError異常。固然有些瀏覽器支持改動容量上限。但爲了兼容其它瀏覽器。最好按5M的容量來使用。

session

2.localStorage 是以key-value形式保存數據的，key和value僅僅能是字符串格式。所以數字1保存後，會轉換成字符串1。

post

3.localStorage 的寫入與讀取寫法有下面幾種：
ui

localStorage.name = 'fdipzone';
name = localStorage.name;

localStorage['name'] = 'fdipzone';
name = localStorage['name'];

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

localStorage[key] = value寫法主流瀏覽器都支持，官方並無說明那一種寫法是標準。

但假設運行下面的代碼就使localStorage失效。
url

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

所以，建議使用setItem(), getItem(), removeItem(), clear()來實現寫入。讀取，刪除，清空。

spa

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);
	}

	// 保存數據
	$('saveBtn').onclick = function(){
		oStorage.setItem('name', $('name').value);

		if($('gender1').checked==true){
			oStorage.setItem('gender', 1);
		}else if($('gender2').checked==true){
			oStorage.setItem('gender', 2);
		}
	}

	// 獲取數據
	$('getBtn').onclick = function(){
		$('name').value = oStorage.getItem('name');
		if(oStorage.getItem('gender')==1){
			$('gender1').checked = true;
		}else if(oStorage.getItem('gender')==2){
			$('gender2').checked = true;
		}
	}

	// 刪除數據name
	$('removeBtn').onclick = function(){
		oStorage.removeItem('name');
	}

	// 清空數據
	$('clearBtn').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);
	}

	// 保存數據
	$('saveBtn').onclick = function(){
		var name = $('name').value;
		var gender;
		if($('gender1').checked==true){
			gender = 1;
		}else if($('gender2').checked==true){
			gender = 2;
		}

		var data = {};
		data['name'] = name;
		data['gender'] = gender;

		oStorage.setItem('data', JSON.stringify(data));
	}

	// 獲取數據
	$('getBtn').onclick = function(){
		var data = JSON.parse(oStorage.getItem('data'));

		if(data){
			var name = data['name'];
			var gender = data['gender'];

			$('name').value = name;

			if(gender==1){
				$('gender1').checked = true;
			}else if(gender==2){
				$('gender2').checked = true;
			}
		}
	}

	// 清空數據
	$('clearBtn').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;

	// 運行同步數據處理...
}

頁面數據同步樣例：點擊查看

相關標籤/搜索

localstorage&sessionstorage

cookie&sessionstorage&localstorage

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。