How can I make a counter in HTML/CSS

Question

So I made a button thats suppose to keep track of how many time ANYONE clicked, like a total click counter. But I encounter an issue where when I reload the page, it resets back to 0. I want to make sure that it will count everyones click and save

  <script>
    let num = 0;
    function myFunction() {
    document.getElementById("num").textContent = ++num;
  }
  </script>
  
  <button class="button" onclick="myFunction()">
  <p id="num"></p>

Answer 1

you can save your current state into localstorage

like this

 <script>
    let num = localStorage.getItem("counter");
    function myFunction() {
    document.getElementById("num").textContent = ++num;
    localStorage.setItem("counter", document.getElementById("num").textContent);

  }
  </script>
  
  <button class="button" onclick="myFunction()">
  <p id="num"></p>