storage的监听事件

“当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发”

满足条件:

  • 同源
  • 同浏览器

1.调用

1
2
3
4
5
6
7
8
9
// 方式1
window.addEventListener('storage', function (e) {
console.log(e)
}, false);

// 方式2
window.onstorage = function (e) {
console.log(e);
};

2.测试

页面1
设置storage监听事件并打印部分字段。

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
<h1>storage-页面1</h1>
<p id="ctn"></p>
<script type="text/javascript">
window.addEventListener('storage', function (e) {
console.log(e);
document.querySelector('#ctn').innerHTML =
'<p>key: ' + e.key + '</p>' +
'<p>oldValue: ' + e.oldValue + '</p>' +
'<p>newValue: ' + e.newValue + '</p>';
}, false);
</script>
</body>

页面2
操作localStorage

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
27
28
29
30
31
32
33
34
35
<body>
<h1>storage-页面2</h1>
<div>
<p><input id="key" type="text" name="key" placeholder="key"></p>
<p><input id="value" type="text" name="value" placeholder="value"></p>
<p>
<button id="add">添加/修改</button>
<button id="delete">删除</button>
</p>
</div>

<script type="text/javascript">
var $key = document.getElementById('key');
var $value = document.getElementById('value');
var $add = document.getElementById('add');
var $delete = document.getElementById('delete');

// add
$add.addEventListener('click', function () {
var _key = $key.value,
_value = $value.value;

localStorage.setItem(_key, _value);
alert('添加/修改 成功!');
}, false);

// delete
$delete.addEventListener('click', function () {
var _key = $key.value;

localStorage.removeItem(_key);
alert('删除成功!');
}, false);
</script>
</body>

其中

  • key:代表属性名发生变化.当被clear()方法清除之后所有属性名变为null. Read only(只读).
  • oldValue:新添加进的值.当被clear()方法执行过或者键名已被删除时值为null Read only(只读).
  • newValue:原始值.而被clear()方法执行过,或在设置新值之前并没有设置初始值时则返回null。 Read only(只读).

2.1 添加

如图,先在页面2添加名为”test”的缓存,设置值为1

test

页面1中我们可见结果

result

2.2 修改

如图,在页面2中修改”test”的缓存,设置值为123

test

页面1中我们可见结果

result

2.3 修改

如图,在页面2中删除”test”的缓存

test

页面1中我们可见结果

result

3 storage event对象

监听函数所获取到的参数e为StorageEvent对象(mdn-StorageEvent

event

4 storage 兼容

storage

兼容就是三个字:放心用

参考资料