浏览器中的跨页面通信(三)：StorageEvent
StorageEvent事件介绍
在某些复杂情况下，如果多个页面都需要访问本地存储的数据，当前页面使用的 storage 被其他页面修改时会触发 StorageEvent 事件，能够通知相关的页面。
Web Storage API 内建了一套事件通知机制，当存储区域的内容发生改变（包括增加、修改、删除数据）时，就会自动触发 storage 事件，并把它发送给所有感兴趣的监听者。因此，如果需要跟踪存储区域的改变，就需要在关心存储区域内容的页面监听 storage 事件。（所有支持 localStorage 的浏览器都支持 storage 事件）
【事件在同一个域下的不同页面之间触发，即在 A 页面注册了 storge 的监听处理，只有在跟 A 同域名下的 B 页面操作 storage 对象，A 页面才会被触发 storage 事件】
StorageEvent 对象介绍
storage 事件的处理函数接受的 event 事件对象也和通常的事件对象不同，这些属性如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| //StorageEvent对象
{
bubbles: false,
cancelBubble: false,
cancelable: false,
composed: false,
currentTarget: {...}, //当前Window对象
defaultPrevented: false,
eventPhase: 0,
isTrusted: true,
key: "tabs",//更新的item键名
newValue: "1",//更新后的item键值
oldValue: "2",//更新前的item键值
path: [Window],//一个数组，数组中有一个元素，为当前Window对象
returnValue: true,
srcElement: {...}, //当前Window对象
storageArea: {...}, //Storage对象
target:{...}, //当前Window对象
timeStamp: 101647.2000000067,
type: "storage",
url: "http://www.localhost.com/list.html",//更新localStorage的页面
__proto__: StorageEvent
}
|
我们常用的有如下几个重要的属性，通过这些属性我们可以做很多操作，例如页面之间互相传值，统计当前打开的页面数量（限同源页面）等。
| 属性 |
含义 |
| key |
设置或删除或修改的键。调用clear()时，则为null。 |
| oldValue |
改变之前的旧值。如果是新增元素，则为null。 |
| newValue |
改变之后的新值。如果是删除元素，则为null。 |
| storageArea |
该属性是一个引用，指向发生变化的sessionStorage或localStorage对象 |
| url |
触发这个改变事件的页面的URL |
| target |
当前窗口对象 |
示例
举例
发送页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!doctype html>
<html>
<head>
<title>changeStorage</title>
</head>
<body>
<div>
<p>
<input id="input" value="" />
</p>
<p>
<button id="btn">发送信息</button>
</p>
<p id="getMsg"></p>
</div>
<script>
const input = document.querySelector('#input');
const btn = document.querySelector('#btn');
const getMsg = document.querySelector('#getMsg');
localStorage.setItem('test', 'defaultValue'); // 设置一个默认值
btn.onclick = function() {
localStorage.setItem('test', input.value);
}
</script>
</body>
</html>
|
接收页面:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!doctype html>
<html>
<head>
<title>getStorage</title>
</head>
<body>
<p id="showMsg"></p>
<script>
const showMsg = document.querySelector('#showMsg');
window.addEventListener('storage', (event) => {
showMsg.innerText = `key:${event.key}
旧值：${event.oldValue}
新值： ${event.newValue}`;
}, false);
</script>
</body>
</html>
|
注意点
