如何实现HTML页面间跨用户数据共享？排除local storage与cookies方案

关于LocalStorage的局限性 #

LocalStorage本身就是浏览器端的本地私有存储，数据只会保存在当前用户的浏览器中，完全不会同步到其他用户的设备或服务器——这是它的设计定位，用来存储用户个人的本地数据（比如偏好设置），所以没法实现跨用户的数据共享，这不是bug，是特性。

不使用LocalStorage/Cookie的页面间数据共享方案 #

分两种场景说明：

1. 仅当前用户的同域名页面间共享 #

如果只是同一个用户打开的同域名下两个页面共享数据，可选这些方法：

• URL参数传递：适合少量非敏感数据。跳转时把数据拼在URL的查询参数里，目标页面解析参数获取数据。
  示例代码（页面1跳转）：

  // 页面1跳转到页面2并携带数据
  window.location.href = 'page2.html?status=active&userId=123';
  

  页面2获取数据：

  const params = new URLSearchParams(window.location.search);
  const status = params.get('status'); // 得到"active"
  const userId = params.get('userId'); // 得到"123"
  

• Broadcast Channel API：适合实时同步数据，同域名的多个标签页/窗口可以通过频道收发消息。
  页面1发送数据：

  const shareChannel = new BroadcastChannel('cross-page-share');
  shareChannel.postMessage({ type: 'condition', value: true });
  

  页面2监听接收：

  const shareChannel = new BroadcastChannel('cross-page-share');
  shareChannel.onmessage = (event) => {
    if (event.data.type === 'condition') {
      // 这里根据event.data.value执行条件逻辑
      if (event.data.value) {
        console.log('满足条件，执行对应操作');
      }
    }
  };
  

• SharedWorker：适合复杂的跨页面数据交互，创建一个共享的Worker线程，多个页面连接到该Worker来交换数据。

2. 跨用户的全局数据共享 #

如果要让所有访问网页的用户都能看到同一份共享数据，必须依赖后端服务——因为前端本地存储都是用户私有的，没法跨用户同步：

• 后端接口+数据库：把共享数据存在后端数据库（比如MySQL、MongoDB），页面通过fetch/AJAX调用接口来读写数据。
  示例（页面1提交共享数据）：

  fetch('/api/update-shared-data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ conditionFlag: true })
  });
  

  页面2获取共享数据：

  fetch('/api/get-shared-data')
    .then(response => response.json())
    .then(data => {
      // 根据data.conditionFlag执行条件逻辑
      if (data.conditionFlag) {
        // 执行操作
      }
    });
  

• 无后端静态服务方案：如果没有自己的后端，可以用第三方实时数据库服务，通过前端SDK直接操作云端数据，实现多用户实时共享。

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