sessionStorage || localStorage 的storage事件

時間 2019-11-17

標籤 sessionstorage localstorage storage 事件欄目網站開發简体版

原文原文鏈接

storage事件

當儲存的數據發生變化時，會觸發storage事件。咱們能夠指定這個事件的回調函數。html

window.addEventListener("storage",function onStorageChange(event) {
    console.log(event.key);
});複製代碼

回調函數接受一個event對象做爲參數。這個event對象的key屬性，保存發生變化的鍵名。瀏覽器

除了key屬性，event對象的屬性還有三個：bash

oldValue：更新前的值。若是該鍵爲新增長，則這個屬性爲null。  
newValue：更新後的值。若是該鍵被刪除，則這個屬性爲null。  
url：原始觸發storage事件的那個網頁的網址。複製代碼

值得特別注意的是，該事件不在致使數據變化的當前頁面觸發。若是瀏覽器同時打開一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的數據時，其餘全部頁面的storage事件會被觸發，而原始頁面並不觸發storage事件。能夠經過這種機制，實現多個窗口之間的通訊。IE瀏覽器除外，它會在全部頁面觸發storage事件。session

DEMO：函數

<!DOCTYPE html>
<html>


	<head>
		<meta charset="utf-8">
		<title>sessionStorage-localStorage 的storage事件</title>
	</head>


	<body>
		<input type="text" placeholder="輸入">
		<button>點我</button>
		<script>
			(function(D) {
				var val = D.getElementsByTagName("input")[0],
					btn = D.getElementsByTagName("button")[0];
				btn.onclick = function() {
					var value = val.value;
					if(!value) return;
					localStorage.setItem("key", val.value);
				};
				window.addEventListener("storage", function(e) {
					console.log("e");
					console.log(e);
				});
			})(document);
		</script>
	</body>


</html>


複製代碼

相關標籤/搜索

localstorage&sessionstorage

storage

cookie&sessionstorage&localstorage

每日一句

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