localStorage变更事件当前页响应新解-awen

简介: html5的localStorage相信大家都是很熟悉了,但是在chrome等支持该对象的浏览器中(ie10除外),如果你监听storage变更事件你就会发现,当数据发生变化时本页是监听不到storage事件变更消息的。

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的当前页面监听问题就解决了,爽不?

目录
相关文章
|
3月前
|
JavaScript UED
常见的触发函数的事件(实现不同的用户体验)
常见的触发函数的事件(实现不同的用户体验)
17 0
|
17天前
|
JavaScript 知识图谱
【冷知识】获取网页所有的监听事件类型、方法。请认准getEventListeners
【冷知识】获取网页所有的监听事件类型、方法。请认准getEventListeners
|
前端开发
|
Web App开发 JavaScript 前端开发
页面运行中事件频繁触发会阻塞页面吗?
之前看`防抖`和`节流`的时候,看到短时间内大量的事件触发会引起浏览器卡死,浪费浏览器性能,那么为什么事件触发会引起阻塞页面的情况呢?引起页面阻塞的原因真的是因为事件触发太多了吗?
|
运维 前端开发 安全
问题记录:前后端交互无返回,后台服务正常
业务产线反馈商户入住提示服务连接失败,然后要到客户的账号密码,进入系统发现服务确实连接失败, 打开network查看请求的响应,发现请求石沉大海,根本没有到达服务器。
175 0
|
JSON 缓存 前端开发
【Ajax入门技术】如何设置请求头 体 ,利用ajax进行取消请求数据操作,解决重复请求问题,请求超时网络异常以及获取json数据
【Ajax入门技术】如何设置请求头 体 ,利用ajax进行取消请求数据操作,解决重复请求问题,请求超时网络异常以及获取json数据
238 0
【Ajax入门技术】如何设置请求头 体 ,利用ajax进行取消请求数据操作,解决重复请求问题,请求超时网络异常以及获取json数据
|
JavaScript 前端开发
【JavaScript】延迟刷新当前页面
【JavaScript】延迟刷新当前页面
105 0
浅谈一下如何避免用户多次点击造成的多次请求
浅谈一下如何避免用户多次点击造成的多次请求
519 0
|
Web App开发 前端开发 JavaScript
Ajax保留浏览器历史的两种解决方案(Hash&Pjax)
总是在github down点东西,github整个界面做的不错,体验也很好~对于其中的源代码滑动的特效最为喜欢了~刚开始以为这个只是普通的ajax请求效果,但是发现这个特效能够导致浏览器地址栏跟随变化,并且再点击前进后退按钮后又可以将代码滑回滑出~~于是乎就来研究下吧~ 一、通过锚点Hash实现: 在这方面其实国内很早就有做了,比如淘宝画报,通过的是在地址栏后面加#锚点实现的,浏览器是可以识别锚点为单位的历史记录的。
1225 0