应用Storage Event完成页面间通讯

2023年11月8日 286次阅读 来源: 郭某某

我们都晓得触发window.onstorage必需满足以下两个前提：

  1. 经由过程localStorage.setItem或sessionStorage.setItem保留（更新）某个storage
  2. 保留（更新）这个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个有效的属性，它们分别是：

  1. key 被初始化或更新的storage的键名
  2. oldValue 被初始化或更新的storage之前的值
  3. newValue 被初始化或更新的storage以后的值

连系这3个症结属性，我们就能够完成页面间的数据同步

末了提一下localStorage与sessionStorage的区分

localStorage 内里存储的数据没有逾期时候设置，而存储在 sessionStorage 内里的数据在页面会话结束时会被消灭

    原文作者：郭某某
    原文地址: https://segmentfault.com/a/1190000015738484
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞