如何避免网页加载时重置变量？跨用户共享变量实现咨询

核心思路 #

要实现变量在用户所有设备间同步，必须依赖后端存储来维护变量的唯一权威状态，前端通过接口与后端交互，再结合合适的同步机制来保证多设备状态一致——这是localStorage这类本地存储做不到的。

具体实现方案 #

1. 后端存储与接口基础 #

• 用数据库（如MySQL、MongoDB）存储变量，每个变量与用户ID绑定，确保用户数据隔离。
• 提供三个核心接口：
  • GET /api/user-variable：拉取当前用户的最新变量值
  • POST /api/user-variable：提交变量新值，覆盖后端存储的状态
  • PUT /api/user-variable（可选）：支持增量更新，比如数值型变量的增减操作

2. 基础同步逻辑（轮询方案） #

• 页面初始化时，调用GET接口获取最新值，替代localStorage的初始化逻辑。
• 当前设备修改变量后，立即调用POST接口更新后端数据。
• 定期轮询（比如每30秒一次）调用GET接口，对比本地缓存值，有差异则更新本地状态。

3. 实时同步优化（可选） #

如果需要设备间即时同步（比如A设备修改后，B设备立刻看到变化），可以用WebSocket或Server-Sent Events（SSE）：

• 前端连接WebSocket服务，后端变量更新时，主动推送新值到该用户的所有在线设备。
• 前端收到推送后直接更新本地变量，无需等待轮询。

4. 离线兜底方案 #

结合localStorage做本地缓存，提升离线体验：

• 从后端拉取到最新值后，同时存入localStorage。
• 离线时使用缓存值，在线后立即同步后端最新值并覆盖缓存。

前端极简代码示例 #

// 初始化变量
async function initSyncVariable() {
  const userToken = localStorage.getItem('userToken');
  try {
    const res = await fetch('/api/user-variable', {
      headers: { 'Authorization': `Bearer ${userToken}` }
    });
    const data = await res.json();
    window.syncVar = data.value;
    localStorage.setItem('syncVarCache', data.value);
  } catch (err) {
    // 离线 fallback 到缓存
    window.syncVar = localStorage.getItem('syncVarCache') || '默认值';
  }
}

// 更新变量
async function updateSyncVariable(newValue) {
  const userToken = localStorage.getItem('userToken');
  window.syncVar = newValue;
  try {
    await fetch('/api/user-variable', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${userToken}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ value: newValue })
    });
    localStorage.setItem('syncVarCache', newValue);
  } catch (err) {
    // 离线先存缓存，标记待同步
    localStorage.setItem('syncVarCache', newValue);
    localStorage.setItem('pendingSync', 'true');
  }
}

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