Increase a number based on Date or Interval javascript (and keep it after refresh page)

Question

I'm struggling for while trying to figure out how to increase a number based on a Date or based on a time (Using setInterval).

I don't know which option is easier. I made it by using setInterval:

HTML

 <p class="counter"></p>

JS

let tickets = 35000;
        const counter = document.querySelector('.counter');

        let interval = setInterval(function(){
        console.log(tickets);

        if (tickets >= 60000) {

            var textSoldOut = `<p>¡Todo vendido!</p>`;
            counter.innerHTML = textSoldOut;
            console.log("Sold out");
            clearInterval(interval);

        }else{
            var text = `¡${tickets} tickets Sold!`;
            contador.innerHTML = text;
            console.log(text)
        }

        const random = Math.floor(Math.random()*(200-100+1)+100);
        tickets += random;


        }, 10000);

The thing is every time the page is refreshed the counter starts from 35000 again. I am trying to figure out how to storage the var tickets. I guess this would be made by using localStorage, but since I am a beginner in JS, I am not able to do it.

Other option would be by checking the date, and based on that, show a number:

function date() {
            var d = new Date();
            var month = d.getMonth();
            var day = d.getDate();

            const counter = document.querySelector('.contador');
            const random = Math.floor(Math.random()*(200-100+1)+100);

            for (let i = 350000; i <= 60000 ; i++) {

                if (month == 0 & day == 28) {
                    var sum = i + random;
                    document.getElementById("contador").innerHTML = suma;
                }else if (mes == 0 & dia == 30) {
                    ...
                } else if (...){
                    ...
                }

            }

            document.getElementById("dia").innerHTML = dia;
            document.getElementById("mes").innerHTML = mes;
        }

        fecha();

Could someone help me out to reach the result? I would really appreciate it

Does this answer your question? [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — Liam, Jan 28 '20 at 13:40
@Liam I get that it would be by using localStorage, but how can I storage my var tickets? I'm sorry but I dont have advanced JS concept, just try to learn — JFelix, Jan 28 '20 at 13:52
Try pasting your code on a runnable snippet by using `Ctrl+M` (it's easier for people to help). Also, your code has things like `contador` which is undefined. — Richard, Jan 28 '20 at 14:01
`localStorage.setItem('stuff', tickets);` This is all covered in [the docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) — Liam, Jan 28 '20 at 14:04
@Richard thank you for the advice, I will use it the next time, thank you — JFelix, Jan 28 '20 at 19:45

score 2 · Accepted Answer · answered Jan 28 '20 at 14:17

The Storage object accessible via the localStorage property offers two methods to save or retrieve data: setItem and getItem().

Usage is quite simple. If you want to save the numbers of tickets into a myTickets key on localStorage you have to do it like this:

localStorage.setItem("myTickets", tickets);

To retrieve that data later on:

localStorage.getItem("myTickets");

You just have to make sure to update the myTickets key on localStorage as you increase the number of tickets inside the setinterval callback function.

let tickets = 35000;
if (localStorage.getItem("myTickets") == null) {
  localStorage.setItem("myTickets", tickets);
} else {
  tickets = localStorage.getItem("myTickets");
}

const counter = document.querySelector('.counter');

let interval = setInterval(function() {
  console.log(tickets);

  if (tickets >= 60000) {

    var textSoldOut = `<p>¡Todo vendido!</p>`;
    counter.innerHTML = textSoldOut;
    console.log("Sold out");
    clearInterval(interval);

  } else {
    var text = `¡${tickets} tickets Sold!`;
    console.log(text)
  }

  const random = Math.floor(Math.random() * (200 - 100 + 1) + 100);
  tickets += random;
  localStorage.setItem("myTickets", tickets);

}, 10000);

thank you for the explanation, really clear and helpful. I will try to apply it for different projects. Really appreciate! — JFelix, Jan 28 '20 at 19:52

Increase a number based on Date or Interval javascript (and keep it after refresh page)

1 Answers1