Mulder's Java小鋪: [Javascript] 暫存網頁資料 localStorage 和 SessionStorage

如何用javascript 暫存資料，有下列兩個方式 localstorage 和 sessionstorage
localstorage 和 sessionstorage 差異如下：
localStorage:只要不去清除，那麼只要是在同一個瀏覽器就算新開一個tab也都可以再把資料取回來
SessionStorage:只要關閉瀏覽器或者新開一個tab生命週期就結束了，也就無法取得資料了

	<body>
	<table border="1">
	<tr>
	<td>
	local storage：
	</td>
	<td>
	<input type="text" id="local" />
	<div id="localvalue"></div>
	</td>
	</tr>
	<tr>
	<td>
	session storage:：
	</td>
	<td>
	<input type="text" id="session" />
	<div id="sessionvalue"></div>
	</td>
	</tr>
	<tr>
	<td colspan="2">
	<button type="button" id="save" onclick="saveStorage()">save</button>
	<button type="button" id="open" onclick="openStorage()">open</button>
	<button type="button" id="clear" onclick="clearStorage()">clear</button>
	</td>
	</tr>
	<tr>
	<td>source from：http://www.dotblogs.com.tw/richshangwei/archive/2014/12/18/147707.aspx</td>
	</tr>
	</table>
	</body>

view raw gistfile1.html hosted with ❤ by GitHub

	<script>
	function saveStorage(){
	window.localStorage["local"] = document.getElementById('local').value;
	window.sessionStorage["session"] = document.getElementById('session').value;
	}
	function openStorage(){
	document.getElementById('localvalue').textContent = window.localStorage["local"];
	document.getElementById('sessionvalue').textContent = window.sessionStorage["session"];
	}
	function clearStorage(){
	document.getElementById('local').value = window.localStorage.clear();
	document.getElementById('session').value = window.sessionStorage.clear();
	document.getElementById('local').value = "";
	document.getElementById('session').value = "";
	document.getElementById('localvalue').textContent = "";
	document.getElementById('sessionvalue').textContent = "";
	}
	</script>

view raw javascript localStorage and sessionStorage hosted with ❤ by GitHub

資料來源：http://www.dotblogs.com.tw/richshangwei/archive/2014/12/18/147707.aspx

Mulder's Java小鋪

2015年3月9日星期一

[Javascript] 暫存網頁資料 localStorage 和 SessionStorage

沒有留言:

2015年3月9日 星期一

[Javascript] 暫存網頁資料 localStorage 和 SessionStorage

沒有留言:

2015年3月9日星期一