How to make the current number stay when refrshing the page

Question

i am working on a little project. The project: making a button (when pressed the number goes plus 1). The problem that i have is when i refresh the page the current number will turn back to 0. Is there a way that the site remebers the current number? Here is the code i made(the button work.(the css file is not included.)):

<head>
    <title>Clicker</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <script type="text/javascript">

    var clicks = 0; 
    function clickME() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks; 
 }
    </script>
    <button class="button" type="button" onclick="clickME()">Click me</button>
    <p class="number"><a id="clicks">0</a></p>

</body></html>

This should answer more specific your question. In fact there are several options. But this question is a duplicate: [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — Jonathan Stellwag, Jan 23 '19 at 13:35
You can use localStorage, sessionStorage, Cookies, HistoryAPI or changing location.hash — jcubic, Jan 23 '19 at 14:08

score -1 · Accepted Answer · answered Jan 23 '19 at 13:41

-1

you need to store in the local storage, also the script code should be moved after body, since once your doing dom manipulation ,when the dom is load only trigger actions to dom using javascript. Else the dom element wont be till loaded and it will throw error when you are accessing the id which is still not loaded.

I hope the below code will solve the issue.

Note : Local Storage

<head>
    <title>Clicker</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>

    <button class="button" type="button" onclick="clickME()">Click me</button>
    <p class="number"><a id="clicks">0</a></p>

</body>
<script type="text/javascript">

    function clickME() {
        let clicks = Number(localStorage.getItem("counts") || 0)
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
        localStorage.setItem("counts", clicks)
    }
    document.getElementById('clicks').innerHTML = localStorage.getItem("counts") || 0


</script>

</html>

answered Jan 23 '19 at 13:41

Learner

8,379
7
44
82

Thanks for the help. I didn't know about local storage yet. I am looking in to it. The code that you sended is working. – kobey arts Jan 23 '19 at 14:00
@kobeyarts Happy to help, if it worked for you please accept the answer. :) – Learner Jan 23 '19 at 14:05
Just to know, the counter resets when i restart my computer (offline html document). Will the counter reset when i upload in on my website.(will it stay up at any time?). And could more than one person (site visitors) be able to click the button? – kobey arts Jan 23 '19 at 14:05
@kobeyarts once the user clears the local storage only, you can read more on here . https://stackoverflow.com/questions/8537112/when-is-localstorage-cleared. I think to get the site visitors you need to get the ip and store the ip based on each ip only view will increase . Don't know much about it. i hope you can ask a question related to that. – Learner Jan 23 '19 at 16:19
may i know why it is downvoted ?? – Learner Feb 07 '19 at 09:39

How to make the current number stay when refrshing the page

1 Answers1