JavaScript storage 事件.docx
《JavaScript storage 事件.docx》由会员分享，可在线阅读，更多相关《JavaScript storage 事件.docx（7页珍藏版）》请在冰豆网上搜索。
JavaScriptstorage事件
JavaScriptstorage事件
storage大事在对localStorage与sessionStorage举行数据举行增删改操作时触发。
此大事对于两种本地存储方式都有效，下面仅以localStorage做一下介绍。
关于大事处理函数注册，可以参阅如何注册大事处理函数一章节。
关于上述两种数据本地存储计划概述参阅如下两篇文章：
（1）.localStorage使用一章节。
（2）.sessionStorage使用一章节。
下面通过代码实例对此大事举行一下具体介绍。
[HTML]纯文本查看复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div{
width:
200px;
height:
50px;
color:
red;
margin:
0pxauto;
}
localStorage.setItem（"name",""）;
localStorage.setItem（"address","青岛市南区"）;
localStorage.setItem（"url",""）;
在谷歌开发者工具查看效果
上述代码会在localStorage中添加三条数据，谷歌开发者工具截图如下：
a:
3:
{s:
3:
\"pic\";s:
43:
\"portal/201910/23/145442kzyhmb982g3m06z3.png\";s:
5:
\"thumb\";s:
0:
\"\";s:
6:
\"remote\";N;}
下面为storage大事注册大事处理函数监听对localStorage的操作。
[HTML]纯文本查看复制代码运行代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
div{
width:
200px;
height:
50px;
color:
red;
margin:
0pxauto;
}
window.onload=（）=>{
letobt=document.getElementById（"bt"）;
letodiv=document.getElementById（"ant"）;
//storage大事处理函数
addEventListener（&39;storage&39;,function（e）{
odiv.innerHTML="";
},false）
//click大事处理函数
obt.addEventListener（&39;click&39;,function（e）{
localStorage.setItem（"age",5）;
},false）
}
预期效果是，点击按钮添加一条数据项，触发大事，将相应字符串写入div。
但是代码并未达到预期目的，分析如下：
（1）.点击按钮通过setItem（）办法新增一条数据，于是触发storage大事。
（2）.但是实际运行效果却是，大事处理函数并未执行。
（3）.由于在A页面向本地存储的数据操作大事，需要在同源的其他页面监听。
此大事的大事对象具有如下几个属性：
大事对象属性:
（1）.key：
字符串类型，被修改、删除或者添加的键名。
（2）.oldValue：
随意类型，被重写或者添加之前的value值。
（3）.newValue：
随意类型，被重写或者修改的新值。
（4）.url/uri：
字符串类型，触发大事的页面地址。
升级会员 