JavaScript页面跳转后game对象faction属性值未同步的问题

核心原因 #

• 浏览器中每个页面都是独立的JavaScript执行环境，当你跳转到desktop.html时，页面会重新加载所有JS模块，包括GameManager.js。这时候export const game = new Game(0, null)会重新执行，生成一个全新的game实例，和之前在GameSettings页面修改的那个完全不是同一个对象，所以faction还是初始的null。
• 你虽然把faction存到了localStorage，但没有在新页面里读取这个值来同步到新的game实例上，导致新实例依旧用默认值初始化。

解决方案 #

方案一：让GameManager自动从localStorage读取（推荐）

修改GameManager.js，在创建实例时优先读取localStorage里的已存值：

export class Game {
  constructor(score, faction) {
    this.score = score;
    // 优先用localStorage的取值，没有则用传入的默认值
    this.faction = localStorage.getItem("Faction") || faction;
  }
}

export const game = new Game(0, null);

这样不管哪个页面导入game实例，都会自动同步之前保存的faction值，无需每个页面单独处理。

方案二：在Desktop.js中手动同步

如果不想修改GameManager的初始化逻辑，就在Desktop.js里主动读取localStorage并更新game实例：

import { game } from "./GameManager.js";

const savedFaction = localStorage.getItem("Faction");
if (savedFaction) {
  game.faction = savedFaction;
}

console.log(game);

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