localStorge实现浏览器内多个标签页（.html页面）之间的通信

1、reception.js接收页面

<div> <span>收到消息： // getItem: 获取localStorage里面的值 recMsg1.innerHTML = localStorage.getItem("msg1"); recMsg2.innerHTML = localStorage.getItem("msg2"); }; load(); // 只要任何页面修改了localStorage中的值， // 都会自动触发其他页面中的storage事件。 // window监听事件 // window.addEventListener("storage", load); // window.addEventListener("storage", load, true); window.addEventListener("storage", load(), true); 

2、send.js发送页面

<input id="msg1" type="text" /> <br /> <input id="msg2" type="text" /> <br /> <button id="send">发送 // trim: 去除字符串的头尾空格 if (msg1.value.trim() !== "" && msg2.value.trim() !== "") { // setItem: 往localStorage对象中添加数据 // trim: 去除字符串的头尾空格 localStorage.setItem("msg1", msg1.value.trim()); localStorage.setItem("msg2", msg2.value.trim()); }; }; 

3、注意

存在兼容性问题，因为localStorage是html5的属性。

4、完整代码

gitee(码云) - mj01分支 - localStorge 文件夹