58、前端存储技术全解析：从 Storage 事件到 IndexedDB

前端存储技术全解析：从 Storage 事件到 IndexedDB

1. Storage 事件对象属性

“storage” 事件关联的事件对象有一些重要属性，如下表所示：
| 属性 | 描述 |
| — | — |
| key | 被设置或移除项的名称或键。若调用了 clear() 方法，此属性为 null 。 |
| newValue | 若项有新值，则保存该项的新值。若调用了 removeItem() 方法，此属性不存在。 |
| oldValue | 保存已更改或已删除的现有项的旧值。若添加了一个新属性（无旧值），则此属性不在事件对象中。 |
| storageArea | 发生更改的 Storage 对象，通常是 localStorage 对象。 |
| url | 进行此存储更改的文档脚本的 URL（字符串形式）。 |

localStorage 和 “storage” 事件可作为一种广播机制，浏览器借此向当前访问同一网站的所有窗口发送消息。例如，用户请求网站停止执行动画，网站可将该偏好存储在 localStorage 中，后续访问时遵循该设置。存储该偏好会生成一个事件，使显示同一网站的其他窗口也遵循该请求。再如，基于 Web 的图像编辑应用程序允许用户在单独窗口中显示工具面板，用户选择工具时，应用程序使用 localStorage 保存当前状态，并向其他窗口发送新工具已被选中的通知。