我们都晓得触发window.onstorage必需满足以下两个前提：
经由过程localStorage.setItem或sessionStorage.setItem保留（更新）某个storage
保留（更新）这个storage时，它的新值必需与之前的值差别
上面的第二个前提，简朴来说就是：要么是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个有效的属性，它们分别是：
key 被初始化或更新的storage的键名
oldValue 被初始化或更新的storage之前的值
newValue 被初始化或更新的storage以后的值
连系这3个症结属性，我们就能够完成页面间的数据同步
末了提一下localStorage与sessionStorage的区分
localStorage 内里存储的数据没有逾期时候设置，而存储在 sessionStorage 内里的数据在页面会话结束时会被消灭
总结：以上就是本篇文的全部内容，愿望能对人人的进修有所协助。更多相干教程请接见Html5视频教程！
相干引荐：
php公益培训视频教程
HTML5图文教程
HTML5在线手册
以上就是应用Storage Event完成页面间通讯的示例代码的细致内容，更多请关注ki4网别的相干文章！
