storage 事件在对localStorage与sessionStorage进行数据进行增删改操作时触发。
此事件对于两种本地存储方式都有效,下面仅以localStorage做一下介绍。
关于事件处理函数注册,可以参阅如何注册事件处理函数一章节。
关于上述两种数据本地存储方案概述参阅如下两篇文章:
(1).localStorage 用法一章节。
(2).sessionStorage 用法一章节。
下面通过代码实例对此事件进行一下详细介绍。
[HTML] 纯文本查看 复制代码运行代码010203040506070809101112131415161718192021222324蚂蚁部落
在谷歌开发者工具查看效果
上述代码会在localStorage中添加三条数据,谷歌开发者工具截图如下:
下面为storage 事件注册事件处理函数监听对localStorage的操作。
[HTML] 纯文本查看 复制代码运行代码01020304050607080910111213141516171819202122232425262728293031323334353637蚂蚁部落
预期效果是,点击按钮添加一条数据项,触发事件,将相应字符串写入div。
但是代码并未达到预期目的,分析如下:
(1).点击按钮通过setItem()方法新增一条数据,于是触发storage 事件。
(2).但是实际运行效果却是,事件处理函数并未执行。
(3).因为在A页面对本地存储的数据操作事件,需要在同源的其他页面监听。
此事件的事件对象具有如下几个属性:
事件对象属性:
(1).key:字符串类型,被修改、删除或者添加的键名。
(2).oldValue:任意类型,被重写或者添加之前的value值。
(3).newValue:任意类型,被重写或者修改的新值。
(4).url/uri:字符串类型,触发事件的页面地址。