HTML5 Web Storage事件
Storage事件
在某些复杂情况下,如果多个页面都需要访问本地存储的数据,就需要在存储区域的内容发生改变时,能够通知相关的页面。
Web Storage API内建了一套事件通知机制,当存储区域的内容发生改变(包括增加、修改、删除数据)时,就会自动触发 storage 事件,并把它发送给所有感兴趣的监听者。因此,如果需要跟踪存储区域的改变,就需要在关心存储区域内容的页面监听 storage 事件。
所有支持 localStorage 的浏览器都支持 storage 事件,包括 IE8。但IE 8不支持 W3C 标准的 addEventListener。因此,为了监听 storage 事件,还需要检测浏览器支持哪种事件机制:
if (window.addEventListener) {
window.addEventListener("storage", handleStorage, false);
} else {
window.attachEvent("onstorage", handleStorage);
}
handleStorage 回调函数接受一个 StorageEvent 参数,在IE中,StorageEvent对象保存在 window.event 里面。
function handleStorage(e) {
if (!e) {
e = window.event;
}
}
此时,变量 e 就是一个 StorageEvent 对象,这个对象有很多有用的属性。这些属性及含义见表 5‑2:
属性 | 含义 |
---|---|
key | 设置或删除或修改的键。调用clear()时,则为null。 |
oldValue | 改变之前的旧值。如果是新增元素,则为null。 |
newValue | 改变之后的新值。如果是删除元素,则为null。 |
storageArea | 该属性是一个引用,指向发生变化的sessionStorage或localStorage对象 |
url | 触发这个改变事件的页面的URL |
得到这些属性之后,就可以做任何想做的事情。接下来,通过一个完整的实例,来演示一下 localStorage 的 storage 事件机制。
假设有 save.html 和 show.html 两个页面,在 save 页面触发数据改变,在 show 页面通过弹窗将相关信息显示出来。
在 save 页面中,有一个文本框和一个保存按钮,用户在文本框中输入数据后,点击保存按钮,就会调用 saveItem() 函数将用户的输入保存到本地存储中。代码如下:
<input type="text" id="data" placeholder="input date to save">
<button onClick="saveItem()">保存</button>
<script>
function saveItem() {
var data = document.getElementById("data").value;
localStorage.setItem("data", data);
}
</script>
在 show 页面中,注册事件监听函数,来监听 storage 事件,因为它关心存储区域内容的变化:
<script>
if (window.addEventListener) {
window.addEventListener("storage", showStorage);
} else {
window.attachEvent("onstorage", showStorage);
}
function showStorage(e) {
if (!e) {
e = window.event;
}
var str = "key: " + e.key +
"\nnewValue: " + e.newValue +
"\noldValue: " + e.oldValue +
"\nurl: " + e.url +
"\nstorageArea: " + e.storageArea;
alert(str);
}
</script>
此时,如果 save 页面改变了存储区域的内容,就会自动触发 storage 事件,并把它发送给所有监听 storage 事件的页面。
需要注意的是,只有在数据的内容确实发生改变的时候,才会触发 storage 事件。如果把一个值设置成一模一样的值,或删除一个根本就不存在的存储项,则不会触发 storage 事件。并且,storage 事件只会发送给同源、而且处于打开状态的其它页面,而不会发送给触发改变的页面本身(即 save.html)及处于关闭状态的页面。因此,应当从Web服务器上获取本实例的页面。
现在,同时打开 save.html 和 show.html 页面,先在 save 页面输入 123 并保存,再输入 12345 保存。如图 5‑7 所示:
图5-7 改变存储区域的内容
第二次保存时,存储区域的内容发生改变,便触发了 storage 事件,show 页面就会收到 storage 事件,并调用showStorage() 函数来显示相关的信息。运行结果如图 5‑8 所示:
图5-8 显示存储区域的信息
说明:
文档源是通过协议、主机名、端口三者来确定的,只有三者都完全相同,才认为网页是同源的。如,以下每个URL都是不同的文档源:
http://www.waibo.wang // 协议:http,主机名:www.waibo.wang
https://www.waibo.wang // 协议:https,不同协议
http://bbs.waibo.wang // 不同主机名
http://www.waibo.wang:8080 // 不同端口
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》,并全部在 GitHub 上开源。
版权声明:本文出自 歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。
HTML5 Web Storage事件相关推荐
- 使用 jQuery Mobile 与 HTML5 开发 Web App (十六) —— HTML5 Web Storage
绝大多数的软件都需要使用某种具有持久性的方式来存储数据,Web Apps 也不例外,涉及到完整后台的 Web Apps ,可以直接在后台使用 mysql 等数据库来存储数据,但过多的 sql 查询会影 ...
- HTML5 Web Storage用法
早期的网页数据存储只能依赖于cookies,但它存在着容量有限且很小,不便于复杂数据的管理等问题,此外,还需将cookies附带在每一次网络请求之中.HTML5的出现,极大地增加了开发人员的开发灵活度 ...
- html5 web storage攻击,HTML5安全风险详析之二:Web Storage攻击
**一.WebStorage简介** HTML5支持WebStorage,开发者可以为应用创建本地存储,存储一些有用的信息.例如LocalStorage可以长期存储,而且存放空间很大,一般是5M,极大 ...
- HTML5 Web Storage API
Web Storage API Web Storage 是以键值对(key-value)的形式存储数据,要存储的数据需要一个名字作为键,然后就可以使用这个键来读取它的值.键是一个字符串.值可以是 Ja ...
- HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...
- HTML5 Web存储(Web Storage)技术以及用法
使用HTML5可以在本地存储用户的浏览数据.早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以 ...
- Web Storage中的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
- localStorage、sessionStorage详解,以及storage事件使用
有关localStorage和sessionStorage的特性. localStorage本身带有方法有 添加键值对:localStorage.setItem(key,value),如果key存在时 ...
- Where to Store your JWTs – Cookies vs HTML5 Web Storage--转
原文地址:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage Update 5/12/20 ...
最新文章
- adobexd怎么录屏_请问如何使用Adobe XD制作应用动效?
- 最优化——对偶问题的性质(弱对偶性,强对偶性),对偶问题形式的书写(对偶规则)
- html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
- Pawel wojs:《全面战争:三国》美术概览
- winmerge 注意事项
- 导购提成怎么算_空调选购,别问“小白”问题,问导购这几个参数,才会显得内行...
- java home not set_Error: JAVA_HOME is not set and could not be found.
- P1488 肥猫的游戏
- jQuery 性能优化指南(2)
- 错误摘要 HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容。
- linux下nginx404,linux+nginx下的404可能错误
- exfat linux 驱动_「正点原子Linux连载」第二章Ubuntu系统入门(2)
- HTML5+CSS3
- 【智能算法】PSO粒子群算法求解无约束多元函数最值(Java代码实现)
- Simulink电力系统仿真-三相短路
- matlab 平滑曲线连接_曲线拟合的一些想法
- 原生JS写一个首字母排序的通讯录效果
- HQChart使用教程95-报价列表对接第3方数据3-股票数据
- VC++6.0 用gSoap客户端访问WebService
- win10局域网中设置共享文件夹
热门文章
- php使用mysqlnd引发的一些问题处理
- Spring学习总结3——配置datasource三种方式
- Moses manual 中Basline System 2.3.4节用IRSTLM创建语言模型的命令有误
- 微软通信winusb —— 不再为你的usb设备编写驱动
- StructureMap极速上手指南(翻译)
- 五个提升人生智慧的经典故事
- 侏罗纪世界手游显示无法登陆到服务器,《侏罗纪世界手游》不能玩 解决攻略...
- 系统和服务器的关系图,服务器与客户端关系图
- Iterator图解
- “熊猫血”产妇诞双胞胎困难 丈夫全城寻找血源