React-当按钮增加并在另一页面中呈现结果时，最佳计数器会增加计数器？

我是React和Javascript领域的超级新手，并试图通过制作Magic 8 Ball应用程序投入一些开发工作。

我设置了两个页面：

1. 魔术8球游戏页面
2. 统计页面显示有关魔术8球问题的信息

游戏页面功能正常工作（使用下面的server.js文件中的代码段），但是我现在想将游戏页面上有关问题总数的信息传递到统计页面。

我的基本想法是：

• 单击按钮后，我想将计数器增加1
• 将此计数器值存储在本地存储中，然后返回到“统计信息”页面（现在只想打印）

我遇到过几种不同的方法，但是只需要一些有关最佳方法的指导即可。

在实现此功能之前，我整理了几段内容：

index.js文件

<form className="question-input" method="POST" action="/">
  <input type="text" ref="inputquestion" placeholder="Ask your question..."style={{ width: "300px", fontSize:18 }}/>
  <button id="submitquestion" style={{ width: "100px", fontSize:17 }}>Shake Me!</button>
</form>

server.js文件

  server.post('/', (req,res) => {
    console.log("Received request.")
    const answers = [
      "It is certain.",
      "It is decidedly so.",
      "Without a doubt.",
      "Yes - definitely.",
      "You may rely on it.",
      "As I see it, yes.",
      "Most likely.",
      "Outlook good.",
      "Yes.",
      "Signs point to yes.",
      "Reply hazy, try again.",
      "Ask again later.",
      "Better not tell you now.",
      "Cannot predict now.",
      "Concentrate and ask again.",
      "Don't count on it.",
      "My reply is no.",
      "My sources say no.",
      "Outlook not so good.",
      "Very doubtful."
    ]
    const number = Math.floor(Math.random()*20);
    res.status(200).send(answers[number]);

stats.js文件

class StatsPage extends Component {
  render() {
    return (
      <main>
        <Header />
          <h1>Game Statistics</h1>
          <p> Count: </p>
          <style jsx>{`
            h1 {
              font-family:"Arial";
              font-size:50px;
            }`}
          </style>

      </main>
    )
  }
}

export default StatsPage;

我的问题是：每次在index.js文件中按下按钮（即问一个问题）时，如何在stats.js中呈现一个计数器变量？我应该使用saveToLocalStorage来确保计数器保持保存到其状态并且在每次刷新应用程序时都不会恢复为零吗？

另外-如果有人有任何改进意见，请分享！

谢谢你的时间。