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 前端开发 开发者
判断哪些数据的变化需要触发虚拟 DOM 的更新
判断哪些数据的变化需要触发虚拟 DOM 的更新,需要依据框架的响应式原理、组件的状态管理以及各种用户交互和异步操作等多方面因素。开发者需要深入理解所使用框架的工作机制,合理地组织和管理数据,以确保虚拟 DOM 的更新是高效且必要的。
102 58
|
4月前
|
JavaScript 前端开发
|
6月前
|
Java
Response对象页面重定向、时间的动态显示
该博客文章介绍了Response对象的用法,包括页面刷新和页面重定向的实现,通过示例代码展示了如何使用`setHeader`和`sendRedirect`方法进行操作。
|
7月前
|
JavaScript
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
vue 数据变化触发页面响应的三种方式(解决:数据变化页面无响应/不刷新的问题)【含原理】
399 0
|
9月前
|
小程序 JavaScript 前端开发
小程序如何刷新当前页面?
小程序如何刷新当前页面?
1576 0
|
9月前
|
小程序
小程序如何刷新当前页面
小程序如何刷新当前页面
416 0
全局响应返回处理
全局响应返回处理
57 0
|
Windows
连续时间系统的冲激响应和零状态响应
连续时间系统的冲激响应和零状态响应
254 0
|
前端开发