카운트 다운 타이머를 쿠키에 저장하면 페이지를 떠나거나 다시로드 할 때도 계속 카운트 다운됩니다.

Question

내 웹 페이지에 현재 1 시간으로 설정된 카운트 다운 타이머가 표시되어야합니다. 나는 페이지를 떠날 때에도 타이머가 카운트 다운을 계속할 수 있도록 쿠키에 카운트 다운을 저장하려고합니다. 나는 javascript에서 쿠키를 사용하는 초보자이므로 여기서 내가 잘못하고있는 것에 대한 도움이 정말로 필요하다.

여기에 지금은 카운트 다운 대신 자체를 표시하는, 나는 그것이 온 아무 생각이 어떤 임의의 텍스트를 표시 내 HTML 코드

<b id="timer">00:00:00</b><br> 
<button id="start">Start</button> 
<button id="stop" hidden>Stop</button> 

자바 스크립트

var counter=0; 
var timeleft=3600; 

//function that returns countdown format 00:00:00 
function convertSeconds(s){ 
    var hr=Math.floor(s/3600); 
    var min=Math.floor(s/60%60); 
    var sec=s%60; 
    return ("0" + hr).slice(-2) + ':' + ("0" + min).slice(-2) + ':' + ("0" + sec).slice(-2); 
} 

//cookie expire time variable set to 1hr 
var now = new Date(); 
var time = now.getTime(); 
time += 3600 * 1000; 
now.setTime(time); 

var cd = document.getElementById("timer"); 

if(document.cookie.length != 0){ 
    var carray = document.cookie.split("="); 
    cd.innerHTML=carray[1]; //should display initial countdown duration before btnstart is clicked 
    function timeIt(){ //function that displays the dynamic countdown timer 
     counter++; 
     cd.innerHTML=carray[1]; 
    } 
} 

var btnstart = document.getElementById("start"); 
var btnstop = document.getElementById("stop"); 

//starts countdown when btnstart clicked 
btnstart.onclick = function() 
{ 
    //storing the countdown format to a cookie and setting expire time to 1hour 
    document.cookie = "cdanim=" + convertSeconds(timeleft-counter); + ";expires=" + now.toUTCString(); 
    setInterval(timeIt, 1000); //starts the countdown 
    btnstart.hidden=true; 
    btnstop.hidden=false; 
} 

입니다. carray [1]는 1:00:00을 반환해야하지만 그렇지는 않습니다. 도와주세요.

Answer 1

쿠키 대신, localStorage를 사용하는 예제를 만들었지 만, 여전히 포인트를 얻습니다.

https://lab-btmhicjaje.now.sh

소스 코드

https://lab-btmhicjaje.now.sh/_src

HTML

012,351,641 사이트

예 : 여기를 배치 그래서 StackOverflow의이 조각은 로컬 스토리지를 사용하는 것을 허용하지 않습니다

<span class="mdl-chip"> <span class="mdl-chip__text" id="timer"></span> </span><br> <button class="mdl-button mdl-js-button mdl-button--colored" onclick="startTimer()">Start</button> <button class="mdl-button mdl-js-button mdl-button--colored" onclick="stopTimer()">Lap</button> <button class="mdl-button mdl-js-button mdl-button--colored" onclick="resetTimer()">Reset</button> 

자바 스크립트

document.addEventListener('DOMContentLoaded',() => { 
if (localStorage.getItem('timerRunning') === 'true') 
    startTimer(); 
else 
    displayTime(parseInt(localStorage.getItem('timestamp'))); 
}); 
let timer; 
let startTimestamp = parseInt(localStorage.getItem('timestamp')); 
function displayTime(timestamp) { 
    if (timestamp) 
     display(Date.now() - timestamp); 
    else 
     display(0); 
} 
function startTimer() { 
    let timestamp = parseInt(localStorage.getItem('timestamp')) || Date.now(); 
    localStorage.setItem('timestamp', timestamp.toString()); 
    localStorage.setItem('timerRunning', 'true'); 
    clearInterval(timer); 
    timer = setInterval(() => displayTime(timestamp), 100); 
} 
function stopTimer() { 
    localStorage.setItem('timerRunning', 'false'); 
    clearInterval(timer); 
} 
function resetTimer() { 
    localStorage.removeItem('timestamp'); 
    display(0); 
} 
function display(milliseconds) { 
    let el = document.getElementById('timer'); 
    if (el) 
     el.innerHTML = msToTime(milliseconds); 
} 
//https://coderwall.com/p/wkdefg/converting-milliseconds-to-hh-mm-ss-mmm 
function msToTime(duration) { 
    var milliseconds = parseInt((duration % 1000)/100), seconds = parseInt((duration/1000) % 60), minutes = parseInt((duration/(1000 * 60)) % 60), hours = parseInt((duration/(1000 * 60 * 60)) % 24); 
    hours = (hours < 10) ? "0" + hours : hours; 
    minutes = (minutes < 10) ? "0" + minutes : minutes; 
    seconds = (seconds < 10) ? "0" + seconds : seconds; 
    return hours + ":" + minutes + ":" + seconds + "." + milliseconds; 
}