HTML 5 中WebStorage實現數據本地存儲

時間 2019-12-07

原文原文鏈接

webstorage 分sessionStorage和localstorage，sessionStorage是暫時保存，localStorage是永久保存。 sessionStorage假設瀏覽器關閉了，數據就沒有了。而localStorage則不會。html

sessionStorage：

保存數據 sessionStorage.setItem(key, value);

讀取數據 sessionStorage.getItem(key);

localStorage：

保存數據 localStorage.setItem(key, value);

讀取數據 localStorage.getItem(key);

演示樣例web

<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左右的空間。