是否存在可在两个页面共同持有、支持双方调用setState的状态实现方案？

根据你所处的开发场景，可直接选用以下成熟方案实现需求： #

场景1：单页应用（SPA）内的两个路由页面 #

该场景下两个页面共用同一个运行上下文，直接用全局状态方案即可：

• 框架原生方案：
  React生态可以用useContext + useReducer组合，把共享状态提升到两个路由的公共父组件层级，两个页面都可以通过Context拿到修改状态的方法，更新后两个页面自动同步最新值。
  Vue生态可以用provide/inject组合，或者Pinia/Vuex全局状态库，定义一次状态即可在两个页面直接读写修改。
• 通用轻量方案：可以自行实现发布订阅模式的状态容器，核心代码示例：

class SharedState {
  constructor(initialValue) {
    this.state = initialValue
    this.subscribers = []
  }
  setState(newState) {
    this.state = typeof newState === 'function' ? newState(this.state) : newState
    this.subscribers.forEach(callback => callback(this.state))
  }
  subscribe(callback) {
    this.subscribers.push(callback)
    // 返回取消订阅的方法，避免内存泄漏
    return () => this.subscribers = this.subscribers.filter(cb => cb !== callback)
  }
}
// 全局导出同一个实例供两个页面调用
export const sharedPageState = new SharedState({ yourField: '' })

两个页面分别订阅该状态实例，调用sharedPageState.setState即可修改状态，修改后两端会同步收到更新通知。 #

场景2：浏览器中两个独立的同源标签页/窗口 #

该场景下两个页面运行在独立的上下文，需要用浏览器提供的跨上下文API实现：

• 兼容度最高的方案是localStorage + storage事件：
  两个页面都监听window的storage事件，任意一个页面修改localStorage里的共享状态字段时，另一个页面会自动收到事件通知，同步更新本地状态。核心逻辑示例：

// 写状态：任意页面调用即可触发两端同步
const setSharedState = (newVal) => {
  localStorage.setItem('shared_page_state', JSON.stringify(newVal))
}

// 监听状态更新：两个页面都需要注册该监听
window.addEventListener('storage', (e) => {
  if (e.key === 'shared_page_state') {
    const latestState = JSON.parse(e.newValue)
    // 此处更新当前页面的本地状态即可完成同步
  }
})

• 高性能方案可选Broadcast Channel API，是浏览器专门为同源不同上下文通信设计的API，响应速度比storage事件更快，支持直接传递结构化数据无需额外序列化。

注意如果是跨域的两个页面，需要用postMessage配合嵌入iframe的方式实现状态同步，额外增加跨域来源校验逻辑即可。

内容的提问来源于stack exchange，提问作者Золбоо О'