美文网首页
使用 StorageEvent 解决浏览器Tab数据同步问题

使用 StorageEvent 解决浏览器Tab数据同步问题

作者: 飞凡的陀螺 | 来源:发表于2019-05-27 21:48 被阅读0次

    localStorage 大家应该都不会陌生,可以记录一些非敏感的网站数据,比如购物车内的商品数量。
    但是有个问题是,如果用户用浏览器打开了多个Tab。在一个 Tab 中添加一个商品到购物车,其他 Tab 的购物车数量并不会发生变化。
    这时候可以考虑使用 StorageEvent
    当修改了(localStorage或sessionStorage)数据时,会触发此事件。

    使用StorageEvent非常简单,代码如下:

    window.addEventListener('storage', () => {
      // When local storage changes, dump the list to
      // the console.
      console.log(JSON.parse(window.localStorage.getItem('sampleList')));    
    });
    

    其他写法:

    window.onstorage = () => {
      // When local storage changes, dump the list to
      // the console.
      console.log(JSON.parse(window.localStorage.getItem('sampleList')));    
    };
    

    购物车的完整例子,你可以开多个tab实验:
    https://jsbin.com/radekilosu/1/edit?html,css,js,output

    image.png

    另外事件e上还带有很多信息,方便做更多控制。

    字段 含义
    key 发生变化的storageKey
    newValue 变换后新值
    oldValue 变换前原值
    storageArea 相关的变化对象
    url 触发变化的URL,如果是frameset内,则是触发帧的URL

    关于兼容性:最新的火狐,Chrome,Edge的支持,IE未知

    相关文章

      网友评论

          本文标题:使用 StorageEvent 解决浏览器Tab数据同步问题

          本文链接:https://www.haomeiwen.com/subject/hbwktctx.html