Counter on the site without resetting the value

Question

I’m doing a counter to count how many people, for example, died from smoking. But I have a problem, the counter is reset when the pages are updated. The counter should be such that it would not start from the beginning after the page was reloaded and the same number should be displayed for all users who visited the site.

My code from codepen or

   time100.init({
        timenow:{zone:"Europe/Moscow",format:"%Y,%m,%d %H:%i:%s"}
    });

    window.onload = function () {
        var time = document.getElementById('time').innerText;
        var startValue = 0;
        var startTime = (new Date(time)).getTime();        
        var inSec = 20;
        value = startValue + Math.round(((new Date(time)).getTime() - startTime) / 1000 * inSec);
        function add() {
            value += inSec;
            document.getElementById("count").innerHTML = value;
        }
        setInterval(add, 1000);
    };

<span class="timenow" id="time" hidden></span>
<div style="float: left">Died from smoking:&nbsp;</div>
<div id="count"></div>
<script type="text/javascript" src="http://time100.ru/t.js"></script>

@ritaj That is, if I just run this code on the server, then it will not be reset when updating and this number will be the same for all users? — midnightelf18, Feb 06 '20 at 11:44
@JaydipJadhav In this case, there will be different numbers for users — midnightelf18, Feb 06 '20 at 11:45
It won't work like that. You have to save this value somewhere in database, and onload fetch that value and start counter code. Other way is you can use local storage, but it will work for individual users. — Shiv Patne, Feb 06 '20 at 11:46
Does this answer your question? [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — GrafiCode, Feb 06 '20 at 11:46
@MidNightElf: If you want a single central value that you display to all users then you need to track that value in a single central place. That's what you'd do on your server. Store your data in, for example, a database. When the page is loaded, perform whatever calculations you need to perform and display the result to the user. — David, Feb 06 '20 at 11:47
And also I would recommend this increment logic should not run on load, what if multiple users open multiple windows with some time difference? In that case increment won't be precise. Your increment logic should be at Central place too. Otherwise you can use local storage as anyway every user will see different counter though u save it on server but put logic of increment on load. — Shiv Patne, Feb 06 '20 at 11:54

Niels Bosman · Answer 1 · 2020-02-06T11:58:19.670

You could try saving to localStorage every time you run the add function. Then also check if it was already filled.

function add() {
    if (localStorage.getItem('last-count')) {
        value = localStorage.getItem('last-count');
    }

    value += inSec;

    document.getElementById("count").innerHTML = value;
    localStorage.removeItem('last-count');
    localStorage.setItem('last-count', value);
}

Although this is not ideal because this is unique per visitor and wont run in the background. If you want to save data I would recommend that you use a server with a database.

Counter on the site without resetting the value

1 Answers1