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

问题

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>

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

回答1:

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);

来源：https://stackoverflow.com/questions/59950018/increase-a-number-based-on-date-or-interval-javascript-and-keep-it-after-refres

标签

javascript

date

setinterval