자바스크립트 로컬스토리지 Date객체 저장 후 다시 불러올 때 생기는 시간 차

Question

안녕하세요, js 공부하며 토이 프로젝트 진행중입니다&#x1f642;타이머를 만들고 있으며 최근에 타이머의 시간 값에 대한 리팩토링을 하였습니다.시간 값 변수를 수동적으로 1초 씩 더해주는 것보다 (리팩토링 전)Date객체로 시간차로 시간 값을 구하면 더 정확할 것 같아서 입니다. (리팩토링 후) (다수의 코드 생략 후 로직만 간단히 씀.)리팩토링 전:let time &#61; 0; setInterval(function() { time&#43;&#43;; }, 1000); 리팩토링 후:let startTime &#61; Date.now() setInterval(function() { let nowTime &#61; new Date(Date.now() - startTime) }, 1000) 그리고새로고침, reload시에도 타이머가 이어서 작동하게 하려고 시간 데이터를 로컬스토리지에 저장한 뒤 load시에 그 데이터를 불러와 타이머가 작동하게 하고 있었습니다.위의 논리대로 잘 되었으나 최근 리팩토링 하면서 문제가 발생하였습니다.Date객체 값을 로컬스토리지에 저장한 후 다시 불러와 string이 된 데이터를 다시 Date객체로 변환해주면 저장했을 때의 시간과의 차이가 생깁니다.https://codepen.io/jooms6992/pen/poagOEm위에 코드펜 링크로 들어가서 실행해보시면 차이가 생겨버립니다.(제 컴퓨터 기준으로 52초)하지만 GMT 표준시간대 변수를 없애고 Date객체를 생성하면 차이없이 원래의 원하던 값이 나옵니다.(아래는 코드펜 링크와 같은 내용입니다.)'use strict'; // F12 콘솔로그 창을 열어 봐주세용 let nowTime &#61; new Date(0,0,0,0,0,10); window.addEventListener(&#34;beforeunload&#34;, () &#61;> { console.log(nowTime); window.localStorage.setItem('Time', nowTime); }); function getLogFromLocalStorage() { const nowTimeString &#61; window.localStorage.getItem(&#34;Time&#34;); console.log(&#34;get&#34;, nowTimeString); const nowTimeObj &#61; new Date(nowTimeString); console.log('getobj', nowTimeObj); console.log('52초 차이가 왜 생기는걸까??') console.log('ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ') // GMT 때문에 그런거 같아서 GMT 부터 자른 뒤에 Date객체에 전달해줌 const newStr &#61; nowTimeString.split(' ').slice(0,5); const newObj &#61; new Date(newStr); console.log('get newObj', newObj); } getLogFromLocalStorage(); 왜 이런 차이가 생기는 걸까요?? 요약1. 로컬스토리지에 Date객체 저장2. string이 된 값을 new Date()에 전달해 다시 Date객체로 변환함3. 그런데 변환 전 시간 값과 변환 후 시간 값이 달라져버림..4. 하지만 GMT이전의 값만 전달하면 달라지지 않음 동일함 글쓰다가 알게된건데 new Date() 매개 변수의 문자열string 포맷형식과 관련된건가요?그래서 GMT이런 값이 들어가니 오류가 생겨버린건가 &#x1f643;

ㅇㅋ · Accepted Answer

window.localStorage 에 저장하면 String 형태로 저장이 되는데객체로 저장하고 불러오는 과정에서 꼬인것이 아닌가 싶네요nowTime &#61; (new Date(2022,5,9,0,20,10)).getTime();이렇게 단순 타입으로 변환 후 사용하는게 좋을것 같습니다.

thanks! · Answer

오 애초에 getTime으로 밀리초를 저장하면 깔끔하구나 ㅋㅋ 감사요&#x1f638;

자바스크립트 로컬스토리지 Date객체 저장 후 다시 불러올 때 생기는 시간 차

2개의 답변

#localstorage 목록