Share Worker

可以实现，同源页面，不同会话下的通信。

主页面

<input type="text" name="test" id="input">
<div id="show"></div>
<button id="button">同步</button>
<script src="./index.js"></script>

主线程

const worker = new SharedWorker('/worker.js')
const text = document.getElementById('show')
const button = document.getElementById('button')
worker.port.start()
document.getElementById('input').addEventListener('change', (e) => {
  console.log(e.target.value)
  worker.port.postMessage({
    type: 'push',
    value: e.target.value
  })
})
button.addEventListener('click', () => {
  worker.port.postMessage({
    type: 'pull',
  })
})
worker.port.addEventListener('message', (e) => {
  console.log(e)
  text.innerHTML = e.data
})

子线程

console.log(`I'm share worker script`)
let data = null
onconnect = function (e) {
  console.log(e)
  const port = e.ports[0]
  port.onmessage = function(e) {
    switch (e.data.type) {
      case 'push':
        data = e.data.value
        break
      case 'pull':
        port.postMessage(data)
        break
      default:
        break;
    }
  }
}