解决方案有两种思路：浏览器端解决方案、服务器端解决方案。
一、浏览器端解决方案：
思路：本地数据存储
<!-- index01.html -->
<input id="name">
<input type="button" id="btn" value="提交">1. localStorage
原理：localStorage 在所有同源 url 中都是共享的（localStorage 存储在客户端硬盘，两个页面位于不同浏览器也可以共享）。
注意：在不同的页面修改 localStorage，才能够被监听到，相同页面、重复设置相同的值，都是无法被监听的。
用法：
// index01.html
btn.addEventListener('onclick', function () {localStorage.setItem("key", value);
});// index02.html
window.addEventListener("storage", function (e) {console.log(e);
});2. Cookie
原理：同源可访问。
注意：cookie 无法监听变化，需要通过一个定时器，每隔一段时间获取一次数据。
用法：
// index01.html
document.cookie = "key=" + value;// index02.html
function getCookie(key) {// 从cookie中获取并解析数据return JSON.parse("{\"" + document.cookie.replace(/;\s+/gim,"\",\"").replace(/=/gim, "\":\"") + "\"}")[key];
}
setInterval(function(){ console.log("key=" + getCookie("key"));
}, 5000);二、服务器端解决方案：
1. websocket（H5新增的协议）
原理：websocket建立的是全双工通讯，服务器也可以主送发送数据给客户端。只要让服务器作为中转站，就可以实现两个页面的通讯。
// index01.html 与服务器建立 全双工 通讯（index02.html同理）
const socket = new WebSocket('ws://localhost:8080'); // 与服务器建立全双工连接// 连接建立时触发
socket.addEventListener('open', function (event) {socket.send('Hello Server!'); // 发送数据给服务器
});// 客户端接收服务端数据时触发
socket.addEventListener('message', function (event) {console.log('Message from server ', event.data); // 监听服务器传回的数据
});socket.send(); // 发送数据2. SharedWorker（H5新特性）
首先新建一个worker.js，不必打包到项目中，直接放到服务器即可：
let data = '';
let onconnect = function (e) {let port = e.ports[0];port.onmessage = function (e) {if (e.data === 'getData') {port.postMessage(data)} else {data = e.data}}
}
index01.js、index02.js：
const worker = new SharedWorker('worker.js');// 与worker建立连接
worker.port.start();worker.port.addEventListener('message', function (e) {console.log('worker发来的数据：', e.data);
}, false);setBtn.addEventListener('click', function (e) {worker.port.postMessage(value);
}, false);getBtn.addEventListener('click', function (e) {// 获取发送到worker的数据（约定 'getData' 是获取数据）。worker.port.postMessage('getData');
}, false);
)
