我们都知道触发window.onstorage必须满足以下两个条件:
上面的第二个条件,简单来讲就是:要么是storage的初始化,因为不存在的storage,其值为null;要么就是对已有storage的更新
举例:
// 初始化storage window.localStorage.setItem('a', 123); // 注册onstorage事件 window.onstorage = (e) => { console.log(e); }; // 更新storage window.localStorage.setItem('a', 123);
上面的最后一行代码并不会触发onstorage事件,因为a的值并没有变化,前后都是123,所以浏览器判定这次更新是无效的
由于onstorage事件是浏览器触发的,所以如果我们打开了多个相同域名下的页面,并在其中任一一个页面执行window.localStorage.setItem方法(还要保证满足文章开头提到的第二个条件),那么其他页面如果监听了onstorage事件,则这些页面中的onstorage事件回调都会被执行
举例:
// http://www.example.com/a.html <script> // 注册onstorage事件 window.onstorage = (e) => { console.log(e); }; </script>
// http://www.example.com/b.html <script> // 注册onstorage事件 window.onstorage = (e) => { console.log(e); }; </script>
// http://www.example.com/c.html <script> // 触发onstorage事件 window.localStorage.setItem('a', new Date().getTime()); </script>
只要保证c页面在a和b页面之后打开(哪怕三个页面不在同一浏览器窗口,这里需要区别窗口与tab页的区别),那么a和b页面中的onstorage事件都会被触发
现在我们已经知道如何利用storage event实现了页面之间的通信,那么这个通信对于我们有何用途呢?
其实我们只需知道是哪个storage的更新操作触发了onstorage事件就足够了,那么我们如何知道呢?onstorage事件回调和其他事件回调函数一样,也接收一个event对象参数,在这个对象中有3个有用的属性,它们分别是:
结合这3个关键属性,我们就可以实现页面间的数据同步
最后提一下localStorage与sessionStorage的区别
localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
【内容】: 1.利用background-image 渐变样式 2.可以利用scale缩放 3.给伪元素设...
前言: 不知多久能学会 Elisp 上一章: 动态模块 从本章开始,进入这份 Elisp 教...
在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level...
本文是介绍 RecyclerView 入门基础 系列文章 的第四篇。如果您已经对创建 Recycl...
在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下...
前言 在制作顶部菜单的时候,都会要求制作弹出的二级菜单,早先的做法是用jQuery...
简介 处理大量并发是 Go 语言的一大优势。语言内置了方便的并发语法,可以非常方...
打开纯文本代码链接时,自动高亮代码,支持191种语言,97个主题 特性 支持191种...
微信搜索【 脑子进煎鱼了 】关注这一只爆肝煎鱼。本文 GitHub github.com/eddycj...
为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务...