多个页面之间信息的传递

自定义事件

// e 代表触发的事件对象
window.addEventListener("huangbiao", function (e) {
console.log(arguments);
debugger
if (e.myAttr === "demo") {
alert("key值为demo，添加成功！")
}
}, false)
// 创建一个事件对象，名字为 huangbiao
let hbEventObj = new Event("huangbiao")
// 给事件对象添加一个属性，叫做 myAttr
hbEventObj.myAttr = "demo"
// 触发事件
window.dispatchEvent(hbEventObj)

自定义添加localstorage事件监听

// 缓存原来“保存数据”方法对象
var orignalSetItem = localStorage.setItem;
// 覆盖原来“保存数据”的方法
localStorage.setItem = function(key,newValue){
// 创建一个自定义事件对象，名字为 setItemEvent
var setItemEvent = new Event("setItemEvent");
// 给事件添加属性
setItemEvent.newValue = newValue;
// 触发事件
window.dispatchEvent(setItemEvent);
// 触发原来的 localStorage存储 数据的方法,这个是关键，不能使用 localStorage.setItem方法，否则死循环，会内存溢出的
orignalSetItem.apply(this,arguments);
}
window.addEventListener("setItemEvent", function (e) {
alert(e.newValue);
});
localStorage.setItem("name","wang");

自定义监听删除localstorage 事件

var orignalremoveItem = localStorage.removeItem;
localStorage.removeItem = function(key,newValue){
var removeItemEvent = new Event("removeItemEvent");
removeItemEvent.key = key;
window.dispatchEvent(removeItemEvent);
orignalremoveItem.apply(this,arguments);
};
window.addEventListener("removeItemEvent", function (e) {
if(localStorage.getItem("demo")){
if(e.key=='demo'){
alert("key值为demo，删除成功");
}
}else{
alert("本地数据无key值为demo")
}
}

1，localStorage

2，postMessage API
支持两个页面跨域；只能传递字符串数据；参考 window.open；

3，直接引用
适用于两个页面在同一域；可以传递对象数据（对象数据使用 instanceof 做类型判断时有坑）；参考 window.open；

4，WebSocket 服务器中转
需要页面都与服务器建立 WebSockets 连接；支持跨域；参考 WebSocket