【HTML5】Web Storage 事件

传送门: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>

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页