多个页面之间信息的传递

自定义事件

// 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

原文地址:https://www.cnblogs.com/zwjun/p/12705681.html