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

目录
相关文章
|
缓存 测试技术 持续交付
docker desktop 搜索不到images
【2月更文挑战第23天】
3344 0
|
存储 数据中心
什么是T3机房?T1/T2/T3/T4机房等级对比详解
我们在购买IDC服务时都会选择T3机房或者T4机房,那么什么是T3机房?T3机房和T4机房有什么区别?服务器百科网来说说T1/T2/T3/T4机房等级对比详解: IDC机房等级划分 IDC机房的等级划分是根据《数据中心电信基础设施标准》而定的,它是美国国家标准学会(ANSI)颁布的,它将IDC数据中心(大型的设备和管理都比较完善的机房可以称为数据中心)基础设施的可用性定义了四种不同等级,即Tier 1、Tier 2、Tier 3和Tier 4四个等级。
18917 0
|
12月前
|
数据可视化 项目管理 数据库
提高工作效率:5个实用的SOP模板与技巧
SOP(标准操作程序)是将工作流程标准化,明确每一步骤、责任人及时间要求,以提高效率、减少错误并增强团队协作。初入职场者掌握SOP,能更快适应环境,提升个人与团队的工作表现。
2248 1
提高工作效率:5个实用的SOP模板与技巧
|
开发工具 git 缓存
Git忽略规则.gitignore不生效
在项目开发过程中个,一般都会添加 .gitignore 文件,规则很简单,但有时会发现,规则不生效。 原因是 .gitignore 只能忽略那些原来没有被track的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的。
61694 4
|
前端开发 定位技术
Pixi绘制地图和小车
这篇文章讲解了如何使用Pixi.js来绘制地图并在地图上显示小车,包括地图网格的创建和小车图像的定位与移动。
314 1
Pixi绘制地图和小车
|
存储 前端开发 JavaScript
PixiJS源码分析系列: 第一章 从最简单的例子入手
PixiJS源码分析系列: 第一章 从最简单的例子入手
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
|
PHP Apache 应用服务中间件
|
移动开发 小程序 JavaScript
微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)
微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)
1694 0
如何使用Charles进行map remote
如何使用Charles进行map remote