如何使用JavaScript解决浏览器页面随机自动刷新问题

你遇到的随机刷新大概率是VS Code Live Server的默认自动重载机制导致的，这个扩展会监听项目目录下的文件变动，只要你修改并保存了html、js、css等相关文件，服务端就会主动触发浏览器页面刷新，和浏览器本身无关，这也是多浏览器都复现的核心原因。

1. 关闭Live Server自动重载 #

操作路径：

• 打开VS Code设置，搜索 Live Server > Settings: Auto Reload
• 取消该选项的勾选，之后除非你手动点击浏览器刷新按钮，否则页面不会自动更新。
  如果需要调试时代码改动同步到页面，手动点浏览器刷新即可，避免运行游戏时误触保存导致数据丢失。

2. 持久化存储最高分避免刷新丢失 #

就算页面刷新，也可以通过浏览器本地存储localStorage保存最高分，不会因为页面重载清空数据，同时修复你代码里again按钮重复绑定事件的逻辑问题，修改后的JS代码如下：

"use strict";

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
// 初始化时从本地存储取最高分，没有则默认为0
let highScore = localStorage.getItem('guessNumberHighScore') ? Number(localStorage.getItem('guessNumberHighScore')) : 0;
// 页面加载时先渲染历史最高分
document.querySelector(".highscore").textContent = highScore;

document.querySelector(".check").addEventListener("click", function() {
  const guess = Number(document.querySelector(".guess").value);

  if (!guess) {
    document.querySelector(".message").textContent = "No Number";
  } else if (secretNumber === guess) {
    document.querySelector(".number").textContent = secretNumber;
    document.querySelector(".message").textContent = "Correct guess! 🎉";
    document.querySelector("body").style.backgroundColor = "#228B22";

    if (score > highScore) {
      highScore = score;
      // 保存最高分到本地存储
      localStorage.setItem('guessNumberHighScore', highScore)
      document.querySelector(".highscore").textContent = highScore;
    }
  } else if (secretNumber < guess) {
    if (score > 1) {
      score--;
      document.querySelector(".score").textContent = score;
      document.querySelector(".message").textContent = "Too High";
    } else {
      document.querySelector(".score").textContent = 0;
      document.querySelector(".message").textContent = "You lost the game.";
    }
  } else {
    if (score > 1) {
      score--;
      document.querySelector(".score").textContent = score;
      document.querySelector(".message").textContent = "Too Low";
    } else {
      document.querySelector(".score").textContent = 0;
      document.querySelector(".message").textContent = "You lost the game.";
    }
  }
});

// 把again按钮的事件监听移到外部，避免重复绑定
document.querySelector(".again").addEventListener("click", function() {
  score = 20;
  document.querySelector(".score").textContent = score;
  secretNumber = Math.trunc(Math.random() * 20) + 1;
  document.querySelector(".message").textContent = "Start Guessing";
  document.querySelector(".number").textContent = "?";
  document.querySelector("body").style.backgroundColor = "#222222";
  document.querySelector(".guess").value = "";
});

3. 额外优化：拦截输入框回车默认行为 #

部分场景下在输入框输入数字后按回车，可能触发浏览器默认的页面重载行为，可以给输入框加个事件拦截，还可以顺便实现回车触发检查的体验优化：

document.querySelector('.guess').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    e.preventDefault()
    document.querySelector('.check').click()
  }
})

做完以上三步即可解决问题：关闭Live Server自动刷新从根源避免随机重载，加上本地存储就算手动刷新也不会丢失最高分，修复事件绑定逻辑也能避免后续运行异常。

内容的提问来源于stack exchange，提问作者Gregor G.