无脚本链接跨HTML页面传数据及localStorage跨设备同步失效问题咨询

这个问题我之前帮不少开发者解决过——你踩的坑其实是对localStorage的本质理解不够透彻：它是绑定到单个设备的浏览器实例的本地存储，哪怕是同一个域名，手机和电脑的浏览器是完全独立的环境，它们的localStorage数据根本不共享，所以线上部署后自然不会同步更新。

要实现跨设备（手机操作file1，电脑上的file2实时响应），你需要借助服务器端的中间层来中转数据，下面是几种实用的方案：

1. WebSocket 实时双向通信 #

这是最适合实时同步场景的方案，让两个页面都和服务器建立WebSocket连接，当file1触发操作时，服务器把消息推送给所有连接的客户端（包括file2）。

简单实现示例 #

服务器端（用Node.js的ws库）

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// 监听新连接
wss.on('connection', (ws) => {
  // 接收客户端消息，然后广播给所有在线客户端
  ws.on('message', (data) => {
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(data);
      }
    });
  });
});

file1.html 按钮触发代码

document.getElementById('syncBtn').addEventListener('click', () => {
  // 建立WebSocket连接并发送触发信号
  const ws = new WebSocket('ws://你的服务器域名:8080');
  ws.onopen = () => {
    ws.send('file1_btn_clicked'); // 自定义触发标识
    ws.close(); // 发送后关闭连接
  };
});

file2.html 监听响应代码

// 持续保持WebSocket连接
const ws = new WebSocket('ws://你的服务器域名:8080');
ws.onmessage = (event) => {
  if (event.data === 'file1_btn_clicked') {
    // 这里执行你需要对file2的操作，比如修改DOM
    document.body.style.backgroundColor = '#e6f7ff';
    document.getElementById('status').textContent = '手机端已触发操作！';
  }
};

2. 定时轮询服务器接口 #

如果WebSocket的部署成本对你来说有点高，可以用更简单的轮询方案：让file2每隔一段时间请求服务器的接口，检查是否有来自file1的触发信号。

简单实现示例 #

服务器端（用Node.js的Express）

const express = require('express');
const app = express();
let isTriggered = false;

// 允许跨域请求（如果你的前端和服务器不在同一域名）
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// 接收file1的触发请求
app.post('/trigger', (req, res) => {
  isTriggered = true;
  res.sendStatus(200);
});

// 供file2查询触发状态
app.get('/check-status', (req, res) => {
  res.json({ triggered: isTriggered });
  isTriggered = false; // 重置状态，避免重复响应
});

app.listen(3000);

file1.html 按钮触发代码

document.getElementById('syncBtn').addEventListener('click', async () => {
  await fetch('http://你的服务器域名:3000/trigger', { method: 'POST' });
});

file2.html 轮询代码

// 每秒查询一次服务器状态
setInterval(async () => {
  const response = await fetch('http://你的服务器域名:3000/check-status');
  const data = await response.json();
  if (data.triggered) {
    // 执行file2的响应操作
    alert('手机端点击了按钮！');
  }
}, 1000);

3. Server-Sent Events (SSE) 单向实时推送 #

如果只需要服务器给客户端推送消息（不需要file2给file1发消息），SSE是比WebSocket更轻量的选择，它是基于HTTP的单向推送协议。

简单实现示例 #

服务器端（用Node.js的Express）

const express = require('express');
const app = express();
let clients = [];

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

// SSE接口，保持连接并推送消息
app.get('/sse', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  // 将当前客户端加入推送列表
  clients.push(res);

  // 客户端断开连接时移除
  req.on('close', () => {
    clients = clients.filter(client => client !== res);
  });
});

// 接收file1的触发请求，然后推送给所有SSE客户端
app.post('/trigger', (req, res) => {
  clients.forEach(client => {
    client.write('data: triggered\n\n'); // SSE消息格式要求
  });
  res.sendStatus(200);
});

app.listen(3000);

file1.html 按钮触发代码和轮询方案一致

file2.html SSE监听代码

const eventSource = new EventSource('http://你的服务器域名:3000/sse');
eventSource.onmessage = (event) => {
  if (event.data === 'triggered') {
    // 执行file2的响应操作
    document.getElementById('status').textContent = '收到来自file1的触发信号！';
  }
};

总结一下：所有跨设备的页面同步方案都离不开服务器的支持，因为不同设备的浏览器没有直接的通信渠道，必须通过一个共享的服务器来中转数据。

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