【HTML5】Web Storage 事件

最新推荐文章于 2022-06-05 16:43:52 发布

iuukai

最新推荐文章于 2022-06-05 16:43:52 发布

阅读量191

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_45389633/article/details/110609947

版权

HTML5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

传送门：JavaScript 教程 / 浏览器模型 / Storage 接口

文章目录

1. 注意事项
2. 示例
3. 借助 iframe 父子通信【非跨域】

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>

iuukai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML5】Web Storage 事件

传送门：JavaScript 教程 / 浏览器模型 / Storage 接口该事件并不会在当前改动的页面触发，而是在同源且打开的页面才会被触发1. 示例a.html（http://aaa.com/a.html）【操作】<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid
复制链接

扫一扫

专栏目录