jbutton添加点击事件_“JavaScript storage 事件”大揭秘

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：字符串类型，触发事件的页面地址。