如何使用JavaScript保存HTML中修改后的值且对所有访问用户生效

纯前端 JavaScript 无法单独实现多用户全局状态同步，所有用户端的本地存储（localStorage、sessionStorage、IndexedDB）仅对当前浏览器生效，修改后其他用户完全无感知。要实现所有在线用户可见的全局计分同步，需要配合后端服务和实时通信能力，以下是可直接落地的实现方案：

核心逻辑是后端存储全局计分数据，用户修改分数时先提交到后端，后端更新数据后主动推送给所有在线用户，避免刷新丢失和不同步问题。

• 后端可以用 Node.js 快速搭建，用 WebSocket 做实时通信，小流量场景下直接用变量存储计分即可，高流量场景可以替换为 Redis 或 MySQL 做持久化存储。
• 前端核心代码示例：

// 连接后端WebSocket服务
const ws = new WebSocket('ws://你的服务部署地址:8080');
const scoreElement = document.getElementById('tennis-score');

// 监听后端推送的最新计分，更新页面显示
ws.onmessage = (res) => {
  const { tennisScore } = JSON.parse(res.data);
  scoreElement.textContent = tennisScore;
};

// 点击计分触发更新逻辑
scoreElement.addEventListener('click', () => {
  const currentScore = Number(scoreElement.textContent);
  const newScore = calcTennisScore(currentScore);
  // 把新计分提交到后端
  ws.send(JSON.stringify({
    action: 'update',
    score: newScore
  }));
});

// 网球计分规则计算函数，可根据需求修改
function calcTennisScore(current) {
  const rule = { 0: 15, 15: 30, 30: 40, 40: 'game' };
  return rule[current] ?? 0;
}

• 后端 Node.js 核心代码示例：

const WebSocket = require('ws');
// 启动WebSocket服务，端口可自定义
const wss = new WebSocket.Server({ port: 8080 });
// 全局存储网球计分，生产环境可替换为数据库存储
let globalScore = 0;

wss.on('connection', (ws) => {
  // 新用户接入时先推送当前最新计分
  ws.send(JSON.stringify({ tennisScore: globalScore }));

  // 监听前端提交的计分更新请求
  ws.on('message', (msg) => {
    const req = JSON.parse(msg);
    if (req.action === 'update') {
      globalScore = req.score;
      // 把新计分发到所有在线用户
      wss.clients.forEach(client => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify({ tennisScore: globalScore }));
        }
      });
    }
  });
});

如果只是做本地演示不需要跨用户同步，可以直接用localStorage做本地持久化，刷新页面后不会丢失数据：

// 页面加载时读取本地存储的计分
window.addEventListener('load', () => {
  const savedScore = localStorage.getItem('tennis_score') || 0;
  document.getElementById('tennis-score').textContent = savedScore;
});

// 修改计分后同步存入本地存储
function saveScore(newScore) {
  localStorage.setItem('tennis_score', newScore);
}

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