页面刷新后复选框无法通过 LocalStorage 保持选中状态

Question

我目前有一个脚本，可以在页面加载和页面刷新时单击随机复选框，并且我可以通过 localStorage 查看为随机选择的复选框分配的输入值。

但是，我无法在使用 localStorage 进行页面加载或页面刷新时选中任何复选框，目前我有点困惑。

html

<div id="all-games">
   <div>
      <h2>Microsoft Xbox</h2>
         <ul id="games" class="no-bullets">
            <img src="./Game Covers/Microsoft/Microsoft Xbox/call of duty 3.png">
            <li class="video-game"><label><input type="checkbox" value="cod-3" onchange="scrollToGame()"/></label>Call of Duty 3</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/phantasy star online episode i & ii.png">
            <li class="video-game"><label><input type="checkbox" value="phantasy-star-online" onchange="scrollToGame()"/></label>Phantasy Star Online Episode I</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/phantasy star online episode i & ii.png">
            <li class="video-game"><label><input type="checkbox" value="phantasy-star-online-ii" onchange="scrollToGame()"/></label>Phantasy Star Online Episode II</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/shrek.png">
            <li class="video-game"><label><input type="checkbox" value="shrek" onchange="scrollToGame()"/></label>Shrek</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/soulcaliber ii.png">
            <li class="video-game"><label><input type="checkbox" value="soulcaliber-ii" onchange="scrollToGame()"/></label>SoulCalibur II</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/spiderman 2.png">
            <li class="video-game"><label><input type="checkbox" value="spiderman-2" onchange="scrollToGame()"/></label>Spider-Man 2</li>
            <img src="./Game Covers/Microsoft/Microsoft Xbox/star wars episode iii.png">
            <li class="video-game"><label><input type="checkbox" value="star-wars-episode-iii" onchange="scrollToGame()"/></label>Star Wars Episode III: Revenge of the Sith</li>
         </ul>
   </div>
</div>

javascript

<script>
   const games = document.querySelectorAll(".video-game input[type=checkbox]:not(:checked)"); // select games that are currently not checked
   const checkbox = Math.floor(Math.random() * games.length); // get a random index from 0 to games length
   const scrolledGame = games[checkbox];
   scrolledGame.click(); // click on the checkbox for the randomly selected game
   const gameValue = scrolledGame.value;

   function scrollToGame() { 
      scrolledGame.scrollIntoView({ 
         behavior: "smooth"
      });

   };

   if (scrolledGame.checked) {
      localStorage.setItem('game title', gameValue); // title value of the selected checkbox via localStorage
      scrolledGame.checked = true;
   };

   if (localStorage.getItem('game title') === gameValue) {
      scrolledGame.checked = true;
      console.log(scrolledGame.checked);
   };
</script>

Answer 1

回复：我无法在使用 localStorage 进行页面加载或页面刷新时选中任何复选框

那是因为每次刷新页面时都会选中一个新的复选框。您保存和检索“游戏标题”的方式没有任何问题。如果您希望复选框状态保持不变，请不要在刷新页面时更改它们。相反，检索“游戏标题”并选中相应的复选框。