Blog

Blog

PHODAL

EchoesWorks构建: LocalStorage与跨Tab通信

本来想着给EchoesWorks做一个Chrome插件来控制Slide,后来发现了一种更简单的方法 —— 用LocalStorage实现跨tab通信。

EchoesWorks

实现机制

在这里并没有什么特别高级的用法,只是简单的事件监听

    function handler() {
        window.slide.slide(parseInt(localStorage.getItem('echoesworks'), 10));
    }

    if (window.addEventListener) {
        window.addEventListener("storage", handler, false);
    } else {
                   // IE
        window.attachEvent("onstorage", handler);
    }

即,当监听到调用storage的方法,就会跳转到相应的页面。

正常情况下,我们只用一个标签来展示我们的slide。当我们有另外一个标签的时候,我们就可以存储当前的slide。

localStorage.setItem('echoesworks', index);

这样就可以实现,在一个页面到下一页时,另外一个标签也会跳到下一页。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签