1. 程式人生 > >HTML 5 中WebStorage實現資料本地儲存

HTML 5 中WebStorage實現資料本地儲存

webstorage 分sessionStorage和localstorage,sessionStorage是臨時儲存,localStorage是永久儲存。 sessionStorage如果瀏覽器關閉了,資料就沒有了,而localStorage則不會。

sessionStorage: 儲存資料     sessionStorage.setItem(key, value); 讀取資料     sessionStorage.getItem(key); localStorage: 儲存資料     localStorage.setItem(key, value); 讀取資料     localStorage.getItem(key);

示例

<span style="font-family:Microsoft YaHei;font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script language="JavaScript">
			
			function saveStorage(id){
				var target = document.getElementById(id);
     		    var str = target.value;
                sessionStorage.setItem("msg", str);
			}
			
			function loadStorage(id){
				var target = document.getElementById(id);
     			var msg = sessionStorage.getItem("msg");
     			target.innerHTML = msg;
			}
			
		</script>
	</head>
	<body>
		<p id="msg"></p>
		<input type="text" id="input"/>
		<button onclick="saveStorage('input')">儲存資料</button>
		<button onclick="loadStorage('msg')">獲取資料</button>
	</body>
</html></span>

如果使用得好,也可將webStorage作為一個簡易的資料庫,鍵的值採用JSON字串就可以。當然這只是可以實現,運用的時候,webStorage的空間還是很珍貴的,一般大多數瀏覽器都只提供5M左右的空間。