【HTML5】Web Storage 事件

走馬勿觀花發表於2020-12-04
HTMLWeb事件

傳送門：JavaScript 教程 / 瀏覽器模型 / Storage 介面

文章目錄

1. 注意事項

該事件並不會在當前改動的頁面觸發，而是在同源且開啟的頁面才會被觸發
在這裡插入圖片描述

2. 示例

在這裡插入圖片描述

  • a.html（http://aaa.com/a.html）【操作】
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.wrap {padding: 10px; border: 1px solid #ccc;}
	</style>
</head>
<body>
	<div class="wrap set">
		<input type="text" placeholder="key">
		<input type="text" placeholder="value">
		<input type="button" value="增改" onclick="setItem()">
	</div>
	<div class="wrap del" style="margin-top: -1px;">
		<input type="text" placeholder="key">
		<input type="button" value="刪除" onclick="delItem()">
	</div>
	<script>
		// 設定
		function setItem() {
			var k = document.querySelector('.set input[placeholder="key"]').value;
			var v = document.querySelector('.set input[placeholder="value"]').value;
			localStorage.setItem(k, v);
		}
		// 移除
		function delItem() {
			var k = document.querySelector('.del input[placeholder="key"]').value;
			localStorage.removeItem(k);
		}
	</script>
</body>
</html>
  • b.html（http://aaa.com/b.html）【監聽】
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<div class="msg"></div>
	<script>
		var msg = document.querySelector('.msg');
		var prep = localStorage.length;	// 初始值，記錄著變化前的值
		
		// 監聽函式
		function onStorageChange(e) {
			// e.key - 被操作的鍵名
			// e.oldValue - 被操作鍵的原值
			// e.newValue - 被操作鍵的新值
			// e.storageArea - 當前儲存區域
			
			var type = '';
			if (e.storageArea.length > prep) {
				type = '增加鍵值對';
				prep = e.storageArea.length;
			} else if (e.storageArea.length < prep) {
				type = '移除鍵值對';
				prep = e.storageArea.length;
			} else {
				type = '修改鍵值對';
				prep = e.storageArea.length;
			}
			
			var html = '<ul><li>當前操作為：' + type + '</li>'
				+ '<li>操作的鍵名為：' + e.key + '</li>'
				+ '<li>該鍵的原值為：' + e.oldValue + '</li>'
				+ '<li>該值的新值為：' + e.newValue + '</li>'
				+ '<li>當前儲存區內有：' + e.storageArea.length + ' 對鍵值對</li>'
				+ '<li>該操作來自：' + e.url + '</li></ul>';
			msg.innerHTML = html;
		}
		window.addEventListener('storage', onStorageChange, false);
	</script>
</body>
</html>

3. 藉助 iframe 父子通訊【非跨域】

在這裡插入圖片描述

  • a.html（http://aaa.com/a.html）【操作、接收】
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		.wrap {padding: 10px; border: 1px solid #ccc;}
	</style>
</head>
<body>
	<iframe src="http://aaa.com/b.html" style="display: none;"></iframe>
	<div class="wrap set">
		<input type="text" placeholder="key">
		<input type="text" placeholder="value">
		<input type="button" value="增改" onclick="setItem()">
	</div>
	<div class="wrap del" style="margin-top: -1px;">
		<input type="text" placeholder="key">
		<input type="button" value="刪除" onclick="delItem()">
	</div>
	<script>
		// 設定
		function setItem() {
			var k = document.querySelector('.set input[placeholder="key"]').value;
			var v = document.querySelector('.set input[placeholder="value"]').value;
			localStorage.setItem(k, v);
		}
		// 移除
		function delItem() {
			var k = document.querySelector('.del input[placeholder="key"]').value;
			localStorage.removeItem(k);
		}
	</script>
</body>
</html>
  • b.html（http://aaa.com/b.html）【監聽】
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		var msg = document.querySelector('.msg');
		var prep = localStorage.length;	// 初始值，記錄著變化前的值
		
		// 監聽函式
		function onStorageChange(e) {
			// e.key - 被操作的鍵名
			// e.oldValue - 被操作鍵的原值
			// e.newValue - 被操作鍵的新值
			// e.storageArea - 當前儲存區域
			
			var type = '';
			if (e.storageArea.length > prep) {
				type = '增加鍵值對';
				prep = e.storageArea.length;
			} else if (e.storageArea.length < prep) {
				type = '移除鍵值對';
				prep = e.storageArea.length;
			} else {
				type = '修改鍵值對';
				prep = e.storageArea.length;
			}
			
			var msg = '當前操作為：' + type
				+ '\n操作的鍵名為：' + e.key
				+ '\n該鍵的原值為：' + e.oldValue
				+ '\n該值的新值為：' + e.newValue
				+ '\n當前儲存區內有：' + e.storageArea.length + ' 對鍵值對'
				+ '\n該操作來自：' + e.url;
			alert(msg);
		}
		window.addEventListener('storage', onStorageChange,false);
	</script>
</body>
</html>

相關文章