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

目录
相关文章
|
4月前
|
存储 移动开发 JavaScript
使用vuex记住当前页面页码信息,以便从详情页返回列表页时能还原到上一次页面
使用vuex记住当前页面页码信息,以便从详情页返回列表页时能还原到上一次页面
28 0
|
9月前
|
XML JSON 前端开发
异步请求,局部更新页面------Ajax
异步请求,局部更新页面------Ajax
67 0
如何响应BCG的属性列表(CBCGPPropList)改变的事件?
如何响应BCG的属性列表(CBCGPPropList)改变的事件?
|
8月前
|
JavaScript API
更改redux 数据,页面未重新渲染
更改redux 数据,页面未重新渲染
|
前端开发
|
Web App开发 JavaScript 前端开发
页面运行中事件频繁触发会阻塞页面吗?
之前看`防抖`和`节流`的时候,看到短时间内大量的事件触发会引起浏览器卡死,浪费浏览器性能,那么为什么事件触发会引起阻塞页面的情况呢?引起页面阻塞的原因真的是因为事件触发太多了吗?
|
JavaScript 前端开发
【JavaScript】延迟刷新当前页面
【JavaScript】延迟刷新当前页面
106 0
浅谈一下如何避免用户多次点击造成的多次请求
浅谈一下如何避免用户多次点击造成的多次请求
523 0
|
容器 C#
3D场景中的鼠标响应事件
原文:3D场景中的鼠标响应事件 今天要讲的是3D场景中的鼠标响应事件的处理,首先Button的响应是大家熟知的,只要加上一个click事件,然后写一个响应的处理时间就行了。对于二维平面上的一些控件也很好处理,比如在跳棋那篇文章中,就是用了ellipse的鼠标左右键按下的事件响应函数。
894 0