新手JS开发者求助：页面刷新时同步Firebase高分至localStorage

嘿，我明白你遇到的麻烦了！你之前的代码行不通，核心原因是Firebase的数据库操作是异步的——firebase.database().ref('/score/currentHighscore').once('value')返回的不是直接的高分数值，而是一个Promise对象，得等它完成才能拿到真实数据。

下面给你一套可行的解决方案，分步骤来：

正确的实现思路 #

页面加载完成后，先从Firebase异步获取高分数据，拿到有效值后再存入localStorage，这样刷新页面时就能优先用Firebase里的最新高分了。

完整代码示例 #

// 等页面DOM加载完成后再执行操作
document.addEventListener('DOMContentLoaded', async () => {
  try {
    // 从Firebase获取高分快照
    const scoreSnapshot = await firebase.database().ref('/score/currentHighscore').once('value');
    const firebaseHighscore = scoreSnapshot.val();

    // 校验数据有效性：确保是数字且不为null
    if (firebaseHighscore !== null && typeof firebaseHighscore === 'number') {
      // localStorage只能存字符串，所以转成字符串存入
      localStorage.setItem('highscore', firebaseHighscore.toString());
      // 这里可以顺便更新页面上的高分显示，比如：
      // document.getElementById('highscore-text').innerText = `当前最高分：${firebaseHighscore}`;
    } else {
      // 如果Firebase里还没有高分数据，给localStorage设默认值0
      localStorage.setItem('highscore', '0');
    }
  } catch (err) {
    // 处理可能的错误（比如网络问题、Firebase未初始化）
    console.error('加载Firebase高分失败:', err);
    // 加载失败时，保留localStorage现有值，没有的话设为0
    if (!localStorage.getItem('highscore')) {
      localStorage.setItem('highscore', '0');
    }
  }
});

关键细节说明 #

1. 异步处理：用async/await语法来等待Firebase的Promise完成，这样代码更简洁易读；你也可以用.then()链式调用的写法，效果是一样的：

firebase.database().ref('/score/currentHighscore').once('value')
  .then(scoreSnapshot => {
    // 处理快照数据
  })
  .catch(err => {
    // 处理错误
  });

2. 数据校验：一定要检查firebaseHighscore是否有效——如果Firebase里还没存过分，snapshot.val()会返回null，这时候要给个默认值0，避免localStorage存入无效数据。
3. 字符串存储：localStorage只能存储字符串类型，所以要把数字转成字符串再存入，取出来的时候可以用parseInt()转成数字使用。

额外提醒 #

确保你的Firebase已经在页面中正确初始化了，不然这段代码会报错哦！比如你应该在页面开头有类似这样的初始化代码：

// 示例Firebase初始化代码（根据你的项目配置修改）
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  databaseURL: "YOUR_DATABASE_URL",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

firebase.initializeApp(firebaseConfig);

这样调整后，页面加载时就会自动把Firebase里的高分同步到localStorage，刷新页面也不会重置为0啦！

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