专栏首页前端导学实现同一页面多tab时的状态同步

实现同一页面多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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 无懈可击的web设计-读书笔记1

    <html> <head> <title>Page Title</title>

    lilugirl
  • vue2.0教程

    或者使用CDN <script src="https://unpkg.com/vue/dist/vue.js"></script>

    lilugirl
  • css+div知识温馨

    直接对盒子设置margin-left:auto; margin-right:auto ,如果要设置垂直居中,发现这种方法无效,无法通过设置margin:au...

    lilugirl
  • 一段诡异的JavaScript代码,其实考察的是一些JavaScript的基础知识

    Jerry Wang
  • JavaScript Browser BOM

    efonfighting
  • ES6教程-字符串,函数的参数,了解函数的arguments对象,js面向对象,设计模式-单例模式,解构赋值

    主要讲解了ES6对字符串的拓展,包括includes,startsWith和endsWith,另外增加了字符串模板。

    达达前端
  • vue框架入门和ES6介绍

    vue-mvvm模式,vue是一种轻量级的前端框架,主要为模板渲染,数据同步,组件化,模块化,路由等。

    达达前端
  • JavaScript入门篇

    快速认识JavaScript 熟悉JavaScript基本语法 窗口交互方法 通过DOM进行网页元素的操作 学会如何编写JS代码 运用JavaScri...

    达达前端
  • MySQL:【第一篇 入门及基本对象讲解】

    如果在我们的数据极为庞大的情况下,我们需要查询其中的一些数据,例如,查询Eminem的国籍,我们一般会使用遍历,但是毫无疑问,这个响应时间会变得极其缓慢,但是使...

    BWH_Steven
  • 用R代替简单的cytoscape绘图需求

    之前,我一般都是首选cytoscape软件,将数据导入cytoscape以后,就可以绘图。但是cytoscap的缺点是:第一个cytoscape软件下载和运行占...

    用户1359560

扫码关注云+社区

领取腾讯云代金券