zoukankan      html  css  js  c++  java
  • localStorage变更事件当前页响应新解-awen

    html5的localStorage相信大家都是很熟悉了,但是在chrome等支持该对象的浏览器中(ie10除外),如果你监听storage变更事件你就会发现,当数据发生变化时本页是监听不到storage事件变更消息的。而同域的其他打开的页面反而监听到了该消息。悲剧不?

    以上的机制应该是无可厚非的,但是对于单页app或者数据驱动的页面展现来说,这是一个让人抓狂的规事情。awen在开发中为了实现一个纯数据驱动的单页app机制。不得不面对这个问题,经过测试终于实现了本页面locaStorage变更监听。

    基本原理如下:

    1  重新生成一个对象,包装localStorage原生方法:

    var Storage = {
            setItem : function(k,v){
              localStorage.setItem(k,v);
              ......
            },
            removeItem : function(k){
              localStorage.removeItem(k);
                   .......
            },
            getItem :
                ...
          }

    2 在能引起storage变更时间的操作接口中,手动触发StorageEvent事件

      比如removeItem的实现中,你就需要初始化并触发StorageEvent事件:

    var se = document.createEvent("StorageEvent");
    se.initStorageEvent('storage', false, false, key, oldval, newval, url, storage);
    window.dispatchEvent(se);

    3 通过自封装的Storage对象操作,并在当前页监听:

    window.addEventListener("storage",function(e){
         console.log(e);
    },
    false); Storage.addItem('test','小朋友爱吃糖');

    到此为止。StorageEvent的当前页面监听问题就解决了,爽不?

  • 相关阅读:
    rem适配方案flexble.js
    Vue 的生命周期
    前端性能优化方案
    html2canvas解决保存图片模糊问题
    css弹窗动画效果
    数字键盘
    iOS 提交审核注意事项
    js屏幕滚动防抖和节流
    父元素设置固定宽度并设置overflow:scroll,如何让子元素撑开父元素
    存储过程
  • 原文地址:https://www.cnblogs.com/cczw/p/3196195.html
Copyright © 2011-2022 走看看