通过localStorage实现页面通信的方法

本文介绍了一种使用localStorage和事件监听实现的页面间通信方法,通过设置相同的标识符和触发方法,实现在不同页面间的有效信息传递。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
 * @param {Object} s 页面之间通信的标识符,需要通信的页面之间该标识符必须一致
 * @param {Object} f 触发执行的方法(本页面需要被触发的方法)
 * 该方法在需要通信的每个页面上都必须调用
 */
function pagesCommunication(s, f) {
	//监听事件,内部调用传入的方法
	var listenerFun = function(e) {
		//如果key值匹配才会触发,即需要通信的页面之间该标识符必须一致
		if(s!=e.key) return;
		f();
	}
	//清除事件,防止重复触发
	window.removeEventListener("storage", listenerFun);

	//绑定调用事件
	window.addEventListener('storage', listenerFun);
	//通过返回对象进行页面通信的触发
	return function() {
		//如果存在,则需要通过remove进行触发
		if (localStorage.getItem(s)) {
			localStorage.removeItem(s);
		} else {
			//不存在,则通过set进行触发
			localStorage.setItem(s, "pagesCommunication");
		}
	}
}

页面1

var aa = pagesCommunication("page",function(){console.log(1111)});

页面2

var aa = pagesCommunication("page",function(){});
aa();//此时在页面1的控制台会打印出1111
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值