## 第三节:事件
`Storage`接口储存的数据发生变化时,会触发 storage 事件,可以指定这个事件的监听函数。
~~~
window.addEventListener('storage', onStorageChange);
~~~
监听函数接受一个`event`实例对象作为参数。这个实例对象继承了`StorageEvent`接口,有几个特有的属性,都是只读属性。
* `StorageEvent.key`:字符串,表示发生变动的键名。如果 storage 事件是由`clear()`方法引起,该属性返回`null`。
* `StorageEvent.newValue`:字符串,表示新的键值。如果 storage 事件是由`clear()`方法或删除该键值对引发的,该属性返回`null`。
* `StorageEvent.oldValue`:字符串,表示旧的键值。如果该键值对是新增的,该属性返回`null`。
* `StorageEvent.storageArea`:对象,返回键值对所在的整个对象。也说是说,可以从这个属性上面拿到当前域名储存的所有键值对。
* `StorageEvent.url`:字符串,表示原始触发 storage 事件的那个网页的网址。
下面是`StorageEvent.key`属性的例子。
~~~
function onStorageChange(e) {
console.log(e.key);
}
window.addEventListener('storage', onStorageChange);
~~~
> 注意,该事件有一个很特别的地方,就是它不在导致数据变化的当前页面触发,而是在同一个域名的其他窗口触发。也就是说,如果浏览器只打开一个窗口,可能观察不到这个事件。比如同时打开多个窗口,当其中的一个窗口导致储存的数据发生改变时,只有在其他窗口才能观察到监听函数的执行。可以通过这种机制,实现多个窗口之间的通信。
- 第一章:音视频
- 第一节:概述
- 第二节:媒体元素
- 第三节:视频元素
- 第四节:音频元素
- 第四节:事件
- 第二章:高德地图
- 第三章:Storage 接口
- 第一节:概述
- 第二节:属性和方法
- 第三节:事件
- 第四章:IndexedDB
- 第一节:概述
- 第二节:基本概念
- 第三节:indexedDB 对象
- 第四节:IDBRequest 对象
- 第五节:IDBDatabase 对象
- 第六节:IDBObjectStore 对象
- 第七节:IDBTransaction 对象
- 第八节:IDBIndex 对象
- 第九节:IDBCursor 对象
- 第十节:IDBKeyRange 对象
- 第十一节:操作流程
- 第五章:Canvas
- 第一节:概述
- 第二节:绘制图像
- 第一课时:路径
- 第二课时:线型
- 第三课时:矩形
- 第四课时:弧线
- 第五课时:文本
- 第六课时:渐变色和图像填充
- 第七课时:阴影
- 第三节:图像处理
- 第一课时:写入图像
- 第二课时:像素读写
- 第三课时:保存和恢复
- 第四课时:画布
- 第五课时:图像变换
- 第四节:元素方法
- 第一课时:toDataURL()
- 第二课时:toBlob()
- 第五节:使用实例
- 第一课时:动画效果
- 第二课时:像素处理