实现同一页面多tab时的状态同步

更新日期: 2019-11-23阅读: 1.5k标签: tab

不同tab的js执行环境是不同的,因此变量不会共享,watcher也不会互相影响。可以利用 storage事件监控localstorge的变化 ,storege事件只能注册在window上

创建两个页面 A和B 分别在不同的Tab打开 

<!DOCTYPE html>
<html>

<head lang="en">
  <title>A</title>
</head>

<body>
  <script>
    window.addEventListener("storage", function (e) {
      alert(e.newValue);
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <title>B</title>
</head>
<body>
<script>
    localStorage.clear();
    localStorage.setItem('foo', 'bar');
</script>
</body>
</html>

链接: https://www.fly63.com/article/detial/6989

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!