在h5中，新增了localStorage，对应localStorage的有一个storage事件，这个事件可以用来进行页面间进行通信。
页面间通信的列子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A</title>
</head>
<body>
<button>click2</button>
</body>
<script>
document.querySelector('button').onclick = function(){
localStorage.setItem('Num', Math.random()*10);
}
window.addEventListener("storage", function (e) {
console.log(e)
console.log(e.newValue)
alert('来自其他页面的localstorage');
});
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function(key,newValue){
var setItemEvent = new Event("setItemEvent");
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
alert('来自本页面的localstorage');
orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue);
});
</script>
</html>
可以用两个一模一样的页面进行上面测试代码的验证，其中页面间通信主要使用的是
window.addEventListener("storage", function (e) {});
有以下几点需要注意：
- 该事件只能监听的其他页面的setItem触发的storage事件
- 必须是同源的页面（即协议、端口、域名都相同）
而在当前页面，我使用了对localStorage.setItem方法的改造，在改造的函数中，我们使用了自定义事件，并对该事件进行了监听。
在实际的使用中，遇到如下问题：
IE9-11中不接受改造的setItem方法，改造setItem方法后，会导致localStorage调用setItem方法报错
基于这种兼容性的问题，建议不要更改setItem方法
详细的列子，可访问如下页面：
https://alizwell.github.io/front-end/JS/PageMessageA.html
https://alizwell.github.io/front-end/JS/PageMessageB.html