JavaScript中localStorage置于函数外时分数不更新的问题

我写了一段代码，点击按钮会随机生成输赢计数，希望刷新页面后仍能保留分数。但发现把localStorage.setItem()放在函数内时，每次能正常更新分数；放在函数外时，刷新页面分数就会重置。代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>functions</title>
</head>

<body>
  <button onclick="
        winLose()
      ">Click to win</button>
  <script>
    const score = JSON.parse(localStorage.getItem('score'));

    function winLose() {
      const evaluatedNumber = Math.random();
      if (evaluatedNumber > 0 && evaluatedNumber <= 0.5) {
        score.lose++;
        console.log(`You lost, lose count: ${score.lose}`)
      } else if (evaluatedNumber > 0.5 && evaluatedNumber <= 1) {
        score.win++;
        console.log(`You won, win count: ${score.win}`)
      }
    }

    localStorage.setItem('score', JSON.stringify(score))
  </script>
</body>

</html>

咱用大白话给你说透：

• 代码是按顺序从上到下执行的
  页面一加载，script里的代码就依次跑：先从localStorage把旧分数取出来存到score变量里，接着定义winLose函数（这时候函数只是摆着，没真执行），最后直接调用localStorage.setItem()，把刚取出来的旧分数又原样存回去了。

• 函数外的setItem碰不到更新后的分数
  你点击按钮时，winLose函数确实改了score变量里的数字，但这个修改只在当前页面的内存里，没存进localStorage。等你刷新页面，又会重新走一遍加载流程：把旧分数取出来覆盖变量，再把旧分数存回去，之前点击修改的分数等于白忙活。

• 放函数里就能正常更新的原因
  把localStorage.setItem()挪进winLose函数后，每次点击按钮修改完score，立刻就把更新后的分数存进localStorage了。下次刷新页面时，取出来的就是最新的分数，自然不会重置。

另外补个小坑：第一次打开页面时，localStorage里还没有score数据，JSON.parse会得到null，代码会报错。可以加个初始化逻辑：

const score = JSON.parse(localStorage.getItem('score')) || { win: 0, lose: 0 };

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