天天看点

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

storage 事件在对localStorage与sessionStorage进行数据进行增删改操作时触发。

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

此事件对于两种本地存储方式都有效,下面仅以localStorage做一下介绍。

关于事件处理函数注册,可以参阅如何注册事件处理函数一章节。

关于上述两种数据本地存储方案概述参阅如下两篇文章:

(1).localStorage 用法一章节。

(2).sessionStorage 用法一章节。

下面通过代码实例对此事件进行一下详细介绍。

[HTML] 纯文本查看 复制代码运行代码010203040506070809101112131415161718192021222324蚂蚁部落
           

在谷歌开发者工具查看效果

上述代码会在localStorage中添加三条数据,谷歌开发者工具截图如下:

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

下面为storage 事件注册事件处理函数监听对localStorage的操作。

[HTML] 纯文本查看 复制代码运行代码01020304050607080910111213141516171819202122232425262728293031323334353637蚂蚁部落
           

预期效果是,点击按钮添加一条数据项,触发事件,将相应字符串写入div。

但是代码并未达到预期目的,分析如下:

(1).点击按钮通过setItem()方法新增一条数据,于是触发storage 事件。

(2).但是实际运行效果却是,事件处理函数并未执行。

(3).因为在A页面对本地存储的数据操作事件,需要在同源的其他页面监听。

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

此事件的事件对象具有如下几个属性:

事件对象属性:

(1).key:字符串类型,被修改、删除或者添加的键名。

(2).oldValue:任意类型,被重写或者添加之前的value值。

(3).newValue:任意类型,被重写或者修改的新值。

(4).url/uri:字符串类型,触发事件的页面地址。