1. 首页
  2. IT资讯

记一个事件 — onstorage

在项目过程中, 处理这样的场景:

打开浏览器, 用户A登录, 新建一个标签, 用户B登录, 此时用户A退出登录,

即: 保证同一浏览器只能有一个用户处于登录状态.

在做这个需求过程中, 无意中了解到了事件.

在此记录一下此事件(虽然后来由于兼容性, 没有采用此方案).

onstorage触发时机: 当localStorage中的数据发生变化时, onstorage触发, 包括存储, 修改, 删除.

onstorage触发方式: 打开同一域名下的两个页面, 在其中一个页面对localStorage内的数据进行操作, 在另一个界面会触发window上绑定的onstorage事件.

onstorage数据获取: onstorage的事件参数对象中, 可以获取到改变的数据的key,oldValue,newValue.

  1. 设置时, oldValue为null.
  2. 删除时, newValue为null

测试代码:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">     <meta name="renderer" content="webkit">     <title>onstorage测试</title>     <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>     <style> 		*{ 			margin: 0; 			padding: 0; 		} 		div{ 			box-sizing: border-box; 		} 		button,a{ 			cursor: pointer; 			width: 100px; 			height: 40px; 			line-height: 40px; 			border: none; 			background: #20b1aa; 			display: inline-block; 			vertical-align: middle; 			text-decoration: none; 			color: #fff; 			font-size: 14px; 			text-align: center; 		} 		.box{ 			 		}     </style> </head> <body> 	<div class="box"> 		<button class="save">存储</button> 		<button class="saveAgain">再存储</button> 		<button class="get">获取</button> 		<button class="change">修改</button> 		<button class="remove">删除</button> 		<a href="http://10.1.54.213:7777/" target="_blank">标签实现跳转</a> 	</div> 	<script type="text/javascript"> 		var storage = localStorage; 		// var storage = sessionStorage; 		$('.save').on("click", function(){ 			storage.setItem('s1',12); 		}); 		$('.saveAgain').on("click", function(){ 			storage.setItem('s2',22); 		}); 		$('.get').on("click", function(){ 			var s1 = storage.getItem('s1'); 			console.log('获取s1'); 		}); 		$('.change').on("click", function(){ 			storage.setItem('s1',Math.ceil(Math.random() * 1000)); 		}); 		$('.remove').on("click", function(){ 			storage.removeItem('s1'); 		}); 		window.onstorage = function(e) { 			console.log(e) 		  	console.log(e.key + ' 由 ' + e.oldValue + ' 被修改为 ' + e.newValue + '.'); 		}; 	</script> </body> </html>

可在浏览器使用服务器方式,打开两个上述代码界面进行测试

可以再同一个窗口,开两个标签, 也可以开两个窗口.

一个界面修改, 查看另一个界面控制台的打印信息.

推荐使用anywhere插件, 简单快速在本地以服务器方式打开html页面, 可参考anywhere使用,

兼容问题:

项目需要兼容IE11.

测试了谷歌, 火狐,edge都能达到理想的效果.

但是IE就是与众不同, 在IE浏览器中, 在一个页面修改onstorage内数据,

不仅会触发其他界面的的onstorage事件回调函数, 本页面的onstorage同样会被触发. 这就尴尬了.


关于sessionStorage不触发onstorage

虽然看到一篇文章一笔带过, sessionStorage的变化onstorage也能监测到,

但我测试了多次, onstorage并不能监测sessionStorage的变化.

测试方式共有两种情况.

  1. 两个标签都输入同样的地址, 此时两个标签的sessionStorage是相互独立的,

不共享的, 所以更别提监测另外一个页面的变化了.

在一个界面修改sessionStorage数据, 另一个界面的sessionStorage数据是不会变化的.

另一个界面的onstorage的事件就不会触发.

2. 打开一个标签, 在此标签内, 通过点击a链接打开另外一个页面,

此时, 在打开时那一刻的sessionStorage存储状态, 是可以带到打开的标签的,

就像url参数一样, 但之后两个界面的sessionStorage的联系就断开了,

他们的联系只是在打开界面的瞬间, 复制出来一份数据相同的,

之后打开界面的修改和删除, 仍是相互独立的. 就回到了测试方式1的情况.

针对onstorage事件, 有兴趣的朋友可以测试下, 文中不足欢迎支出.

原文始发于:记一个事件 — onstorage

主题测试文章,只做测试使用。发布者:酒颂,转转请注明出处:http://www.cxybcw.com/25301.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code