JavaScript Countdown + Date Save

Save current countdown to localStorage, Mission Impossible-style.

by Ciprian Popescu

HTML

<p>
    <a href="https://getbutterfly.com/24-hour-countdown-with-progress-saving-using-vanilla-javascript/">24-Hour Countdown with Progress Saving Using Vanilla JavaScript</a>
</p>

<div id="countdown"></div>

JavaScript

function countdown(elementName, minutes, seconds) {
	let element, endTime, hours, mins, msLeft, time;

	function twoDigits(n) {
		return (n <= 9 ? '0' + n : n);
	}

	function updateTimer() {
		msLeft = endTime - (+new Date);

		if (msLeft < 1000) {
			element.innerHTML = '0:00';
		} else {
			time = new Date(msLeft);
			hours = time.getUTCHours();
			mins = time.getUTCMinutes();
			element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());

			// Save current time locally
			localStorage.setItem('lastHValue', hours);
			localStorage.setItem('lastMValue', mins);
			localStorage.setItem('lastSValue', time.getUTCSeconds());

			setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
		}
	}

	element = document.getElementById(elementName);
	endTime = (+new Date) + 1000 * (60*minutes + seconds) + 500;
	updateTimer();
}

if (localStorage.getItem('lastHValue')) {
	let lastHValue = parseInt(localStorage.getItem('lastHValue')),
		  lastMValue = parseInt(localStorage.getItem('lastMValue')),
		  lastSValue = parseInt(localStorage.getItem('lastSValue'));

	let totalMValue = parseInt((lastHValue * 60) + lastMValue);

	countdown('countdown', totalMValue, lastSValue);
} else {
	countdown('countdown', 1439, 59);
}