Compte à rebours Javascript qui persiste à travers l'actualisation de la page

Question

J'essaie de faire un compte à rebours, qui ne redémarre pas après l'actualisation de cette page. J'utilise le compte à rebours de bois de keith. Je veux compter jusqu'à 5 minutes.

var countdownTarget = localStorage.getItem('countdownTarget'); 
    if (countdownTarget === null) 
    { 
     var countdownTarget = new Date(); 
     countdownTarget = new Date(countdownTarget.getFullYear(), countdownTarget.getMonth(), countdownTarget.getDate(), countdownTarget.getHours(), countdownTarget.getMinutes() + 5, countdownTarget.getSeconds()); 
     localStorage.setItem('countdownTarget', countdownTarget); 
    } 

    $('#defaultCountdown').countdown({ until : countdownTarget, format: 'MS', compact: true}); 

Je gardais la date actuelle + 5 minutes au navigateur de stockage local countdownTarget (seulement si elle n'a pas été fait avant). Et si un utilisateur actualise la page, l'heure doit être persistante. Mais il y a un problème. Quand je charge la page pour la première fois, le temps compte à partir de 5 minutes (ce qui devrait être normal), mais quand j'essaye de le rafraîchir à nouveau, il commence à compter à partir de 36 minutes et je ne sais pas pourquoi et je ne sais pas d'où viennent ces 36 minutes.

Answer 1

Au lieu de re-déclarer la date, pourquoi ne pas simplement incrémenter les minutes? Votre code a fonctionné pour moi. En outre, vous ne devez initier countdownTarget qu'une seule fois.

var countdownTarget = localStorage.getItem('countdownTarget'); 
if (countdownTarget === null) { 
    countdownTarget = new Date(); 
    countdownTarget.setMinutes(countdownTarget.getMinutes() + 5); 
    localStorage.setItem('countdownTarget', countdownTarget); 
} else { 
    countdownTarget = new Date(countdownTarget); 
} 
$('#defaultCountdown').countdown({ until : countdownTarget, format: 'MS', compact: true});