这个视频我们可以来看一下使用这个 storage 事件 ..

准备

先打开这个 index.html 你可以在这个课程的资源包里找到这个文档 … 在这个网页里，我事先添加了两个按钮 .. 设置数据项目 … 在上面定义了一个 set-storage ID … 一会儿我们要用到这个 ID 去监听这个按钮的点击事件 ..

另外还有一个 清除数据项目 这个按钮 … 上面的 ID 是 clear-storage ..

再打开 script.js …

先定义了一个函数 … 它做的事儿就是去设置 localStorage …

// 设置数据
function setStorage() {
localStorage.setItem('name', '王皓');
}

再定义一个函数 … 让它可以去清空设置的 localStorage …

// 清空数据
function clearStorage() {
localStorage.clear();
}

下面我们去监听 index.html 的那两个按钮 … 点击 设置数据项目 按钮的时候，去执行 setStorage() … 点击 清除数据项目 按钮的时候 .. 执行 clearStorage() …

// 监听 设置数据项目 按钮
var setStorageBtn = document.getElementById("set-storage");
setStorageBtn.addEventListener("click", setStorage, false);

// 监听 清除数据项目 按钮
var clearStorageBtn = document.getElementById("clear-storage");
clearStorageBtn.addEventListener("click", clearStorage, false);

storage 事件

然后我们可以去监听 storage 事件 … 点击 设置数据项目 或者 清除数据项目 按钮的时候，可能会导致存储区域发生改变 … 这样就会触发 storage 事件 …

// 监听存储区域变化事件
window.addEventListener("storage", storageEventHandle, false);

当 storage 事件发生的时候，让它去执行 storageEventHandle 这个函数 … 在它的上面 … 我们可以再去定义这个函数 …

function storageEventHandle() {} .. storage 发生的时候，会收到一个有用的信息 .. 比如，被改变的数据值的名称 … 这个数据之前的值是什么 … 还有改变以后的值是什么 .. 这个更改来自哪个地址等等 …

这些东西会放在一个对象里面 .. 我们可以把这个对象交给处理 storage 事件的这个函数 … 这里我们可以叫它 event … 这样在函数里面 … 用 event 点 的形式 .. 比如 event.key 可以输出发生改变的数据值的名称 … event.oldValue 可以输出改变以前的值 …

event.newValue … 可以输出改变之后的值 …

// 处理 storage 事件
function storageEventHandle(event) {
console.log(
"数据名称： " + event.key + "\n" +
"以前的值： " + event.oldValue + "\n" +
"新的值： " + event.newValue + "\n" +
"链接： " + event.url + "\n" +
"存储： " + event.storageArea
);
}

在这个函数里 … 用一个 console.log … 把这些信息输出到控制台上 ..

测试

下面我们可以去测试一下 ….

想要测试 storage 事件 … 我们需要把网页放在一个 web 服务器上 … 你可以在本地搭建一个 web 服务器的环境 … windows 用户可以使用 WAMP .. Mac 用户可以使用 MAMP …

把网页放在服务器的发布目录里面 … 这样我们可以直接在浏览器上，使用 localhost … 访问到这个网页 …

http://localhost/Storage-Course/index.html

因为 storage 会在其它的窗口或者标签里面触发 .. 所以，我们可以新建一个标签 … 打开同样的文档 .. 也可以是不同的文档 … 只要他们在同一个存储范围内就行… （左，右窗口）

这样如果在左边这个窗口里面改变存储数据 … 右边这个窗口会接收到 storage 事件 .. 然后执行 storageEventHandle 函数 .. 在控制台上显示一些内容 ….

打开这两个标签的控制台 …

现在我们还没有设置 storage .. 所以 … 点击 清除数据项目 这个按钮 … 不会有什么反应 … 因为还没有可以清除掉的数据 ..

点击 设置数据项目 … 会设置一条 localStorage 数据 …

这个数据是在左边窗口更改的 .. 所以 … 右边这个窗口会接收到 storage 事件 … 也就会在控制台上输出一些我们事先设计好的内容 …

你会看到 … 发生改变的数据值的名称是 name … 这个数据以前没有值 … 所以，以前的值这里，会显示 null …

新设置的值是 王皓 … 链接是 ….

下面可以点击右边的这个窗口的 设置数据项目 …

左边窗口没有反应 … 因为我们设置的数据是一样的 … 所以不会触发 storage 事件 ..

再点一下 清除数据项目 …

在左边窗口的控制台上 … 会显示一些内容 ..

使用这个 storage 事件 .. 我们可以让不同窗口或者标签之间相互沟通 ..

另外，要注意是 … sessionStorage … 只有在同一个窗口里的框架发生变化的时候 … 才会触发这个 storage 事件 …