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天】
3192 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四个等级。
18613 0
|
11月前
|
数据可视化 项目管理 数据库
提高工作效率:5个实用的SOP模板与技巧
SOP(标准操作程序)是将工作流程标准化,明确每一步骤、责任人及时间要求,以提高效率、减少错误并增强团队协作。初入职场者掌握SOP,能更快适应环境,提升个人与团队的工作表现。
2098 1
提高工作效率:5个实用的SOP模板与技巧
|
开发工具 git 缓存
Git忽略规则.gitignore不生效
在项目开发过程中个,一般都会添加 .gitignore 文件,规则很简单,但有时会发现,规则不生效。 原因是 .gitignore 只能忽略那些原来没有被track的文件,如果某些文件已经被纳入了版本管理中,则修改.gitignore是无效的。
61208 4
|
前端开发 定位技术
Pixi绘制地图和小车
这篇文章讲解了如何使用Pixi.js来绘制地图并在地图上显示小车,包括地图网格的创建和小车图像的定位与移动。
299 1
Pixi绘制地图和小车
|
数据采集 存储 监控
CDGA|做好数据治理的几个策略,不看后悔
做好数据治理是企业实现数字化转型和智能化升级的关键。通过明确目标、建立组织、制定标准、实施质量管理、促进共享与协作以及持续优化与迭代等策略,企业可以构建完善的数据治理体系,提升数据价值,为业务决策提供有力支持。在未来的发展中,数据治理将成为企业核心竞争力的重要组成部分。
|
存储 监控 安全
DOS 拒绝服务攻击及其预防和缓解方法
【8月更文挑战第20天】
1535 0
|
机器学习/深度学习 人工智能 边缘计算
针对资源受限设备的 AI Native 应用轻量化微调技术
【8月更文第2天】随着人工智能(AI)技术的飞速发展,越来越多的应用程序开始在边缘计算和移动设备上部署机器学习模型。然而,这些设备通常具有有限的计算能力和存储空间。为了克服这些限制,本文将介绍一种针对资源受限设备的轻量化微调技术,旨在提高模型性能同时降低计算成本。
532 1
|
存储 前端开发 JavaScript
PixiJS源码分析系列: 第一章 从最简单的例子入手
PixiJS源码分析系列: 第一章 从最简单的例子入手
|
监控 关系型数据库 MySQL
一次彻底讲清如何处理mysql 的死锁问题
【10月更文挑战第16天】本文详细介绍了如何处理 MySQL 中的死锁问题,涵盖死锁的概念、原因、检测方法及解决策略,强调通过优化事务设计、调整数据库参数、手动处理和预防措施等手段,有效减少死锁,提升数据库性能与稳定性。
2188 0