Svelte框架下非关联组件跨标签页实时数据共享问题咨询

原有方案失效原因 #

Svelte原生Store仅存储在当前页面的运行内存中，本身不支持跨标签页数据共享；搭配localStorage使用时如果只在页面初始化时读取一次数据，没有监听跨标签页的变更事件，就只会在页面刷新后才能拿到更新后的值。

方案1：使用Broadcast Channel API（前端纯实现，推荐） #

这是HTML5提供的专门用于同域下不同浏览上下文（标签页、iframe、Web Worker）通信的API，实现成本极低，无需修改后端代码。

// src/store/sharedVar.js
import { writable } from 'svelte/store'

// 声明同域下唯一的通信通道名
const syncChannel = new BroadcastChannel('shared_var_sync')
const DEFAULT_VAL = ''

// 初始化Store
const { subscribe, set, update } = writable(DEFAULT_VAL)

// 监听其他标签页发来的更新通知
syncChannel.onmessage = (event) => {
  if (event.data?.type === 'VAR_UPDATED') {
    set(event.data.payload)
  }
}

// 重写set方法，更新时同步发广播通知其他标签页
const customSet = (newVal) => {
  set(newVal)
  syncChannel.postMessage({
    type: 'VAR_UPDATED',
    payload: newVal
  })
}

export const sharedVar = {
  subscribe,
  set: customSet,
  update
}

使用方式：两个页面都引入上述sharedVar，直接按照Svelte原生Store的语法（$sharedVar）读写即可，更新后会自动同步到所有打开的同域标签页。

方案2：监听storage事件（依赖localStorage持久化） #

如果需要数据持久化，页面刷新后仍保留数值，可以监听浏览器原生的storage事件，该事件会在其他同域标签页修改localStorage时自动触发。

// src/store/sharedVar.js
import { writable } from 'svelte/store'

const STORAGE_KEY = 'my_shared_var'
// 初始化时从localStorage读取历史值
const initialVal = localStorage.getItem(STORAGE_KEY) 
  ? JSON.parse(localStorage.getItem(STORAGE_KEY)) 
  : ''

const { subscribe, set, update } = writable(initialVal)

// 监听其他标签页的localStorage变更
window.addEventListener('storage', (event) => {
  if (event.key === STORAGE_KEY) {
    set(JSON.parse(event.newValue))
  }
})

// 重写set方法，更新时同步写入localStorage
const customSet = (newVal) => {
  set(newVal)
  localStorage.setItem(STORAGE_KEY, JSON.stringify(newVal))
}

export const sharedVar = {
  subscribe,
  set: customSet,
  update
}

方案3：后端配合实现跨端同步 #

如果需要支持跨浏览器、跨设备同步变量，可以使用Server-Sent Events(SSE) 或 WebSocket 方案：后端存储共享变量，变量更新时主动推送给所有已连接的客户端，所有打开的页面就能实时收到变更通知。

注意：以上两种前端方案仅支持同域下的标签页通信，跨域场景无法使用。

内容的提问来源于stack exchange，提问作者red_black_guy