应用StorageEvent实现页面间通讯的示例代码-

这篇文章主要介绍了应用StorageEvent实现页面间通讯的示例代码的相干材料,小编觉得挺不错的，此刻分享给大家，也给大家做个参照 。一起追随小编过来看看吧 这篇文章主要介绍了应用Storage Event实现页面间通讯的示例代码的相干材料，有一定的参照 价值，有需要的伴侣可以参照 一下，但愿对你们有所帮忙。

我们都晓得触发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视频教程！