如何使用document.write()加载文件而非纯文本 留存单页游戏数据

首先你最开始设想的不跳转页面、仅动态更新页面内容来保留JS运行上下文的思路是完全可行的，也是这类实时游戏的标准实现方向，完全不需要靠页面跳转、POST传参来留存玩家数据。 #

关于document.write()的说明 #

直接放弃用这个方法实现需求：

• 这个方法仅能在HTML文档初始加载解析阶段生效，页面加载完成后再调用会直接清空整个文档的所有DOM、JS运行上下文，你存在内存里的玩家数据、socket连接实例都会被直接清除，完全违背你保留数据的需求。
• 它本身只接受字符串类型参数，不存在document.write(game.html)这种直接写入外部文件的写法，就算你先用fetch把外部HTML文件拉成字符串再传入document.write()，带来的全局上下文销毁的副作用也完全不可控，不要在生产项目里用这个API做动态内容更新。

动态切换页面内容的正确实现 #

你只需要在页面里预留一个固定的内容挂载容器，所有对局阶段的视图都渲染到这个容器内部即可，容器外的全局变量、socket实例会一直保留不会重置：

1. 先在入口HTML里写好全局容器，以及全局留存的状态：

   <!-- 入口页面只留这个容器，所有游戏内容都动态渲染进去 -->
   <div id="game-app"></div>
   <script>
     // 这些全局状态只要不刷新页面就会一直存在
     const socket = io(); // 全局只初始化一次socket连接，不用重复建连
     const gameContext = {
       roomId: null,
       currentUser: null,
       playerList: [],
       totalScore: {}
     }
   </script>
   

2. 写一个通用的视图切换方法，需要切换对局阶段/开新对局时调用即可：

   async function switchView(templatePath, afterRender) {
     // 拉取对应页面的HTML模板字符串，模板可以存在服务端静态目录
     const res = await fetch(templatePath);
     const templateHtml = await res.text();
     // 把模板渲染到容器里，不会影响外层的全局状态
     document.getElementById('game-app').innerHTML = templateHtml;
     // 渲染完成后绑定新视图的交互事件
     if (typeof afterRender === 'function') afterRender();
   }
   
   // 举个例子：新对局开始时调用
   function startNewRound() {
     switchView('/templates/round-page.html', () => {
       // 给新页面里的出牌、提交按钮绑定事件
       document.querySelector('#submit-card').addEventListener('click', () => {
         // 这里可以直接访问到全局的socket、gameContext里的所有数据
         socket.emit('play_card', { /* 出牌数据 */ })
       })
     })
   }
   

如果后续交互逻辑变复杂，你可以按需引入轻量的前端模板库做数据绑定，初期用原生JS完全足够实现需求。 #

多端数据一致性的最优方案 #

你之前用POST传数据出现一致性问题，核心是把状态存在了前端、靠HTTP请求来回同步的思路错了。你已经在用socket.io，直接按照实时应用的标准逻辑设计即可：

• 把所有游戏核心状态（玩家信息、得分、牌堆、当前对局阶段）全部存在Node.js服务端，作为唯一可信源，前端只留存当前视图需要展示的临时数据，不要在前端存全局权威状态。
• 新对局开始、玩家出牌、结算得分这类所有状态变更，全部由服务端通过socket事件主动推送给房间内的所有玩家，前端收到推送事件后直接调用上面的switchView方法更新视图、刷新本地展示的数据即可，完全不需要跳转页面、也不需要靠POST传参同步状态。
• 所有玩家的操作全部通过socket事件发送给服务端，服务端校验操作合法性后更新全局状态，再广播给对应房间的所有客户端，从根源上避免多端状态不一致的问题。

作为首次接触这个技术栈的开发者，你一开始就想到不刷新页面保留上下文的方向是对的，不要走回多页面跳转、HTTP请求同步状态的老路，socket.io本身就是为这类多端实时同步场景设计的，把状态校验、更新的逻辑全部收口到服务端，前端只负责触发事件、渲染视图，整体逻辑会顺畅很多。

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