Day27 : Web storage

마지막으로 고치고 싶은 한 가지.

 

타이머라고 한다면 다른 페이지로 이동했다오거나 컴퓨터를 종료시켰다가 다시 킨다해도 카운터가 작동하고 있어야하는데 그렇지 않고 있다.

 

작동하고 있다가

다른 페이지에서 키면 사라져있다.

 

Web Storage

• Browser에 데이터를 저장할 수 있는 기술

 

1. Session Storage

• key - value 형태 저장
• 로컬 환경에 데이터 저장
• 세션 단위로 구분되며 활용
• 브라우저, 탭을 종료하면 영구 삭제

* 세션

: 사용자가 브라우저를 통해 웹 페이지에 접속한 시점부터, 해당 웹 페이지 접속을 종료하는 시점까지를 의미하는 단위

 

2. Local Storage

• key - value 형태 저장
• 로컬 환경에 데이터 저장
• 도메인 단위로 구분되며 활용
• 브라우저 자체를 종료해도 존재

 

---

새로고침을 해도 타이머가 유지되도록 하기 위해 비휘발성인 Local Storage를 활용하자.

 

먼저 Local Storage에 접근해야 한다.

setItem 

• localStorage에서 제공하는 메소드
• key - value 형태 저장

 

[카운트다운 시작] 버튼을 눌렀을 때 당시의 input box에 값에 있는 날짜인 targetDateInput을 value값으로 넣었다.

 

크롬에서 작동해보면 local Storage에 저장된 saved-date를 볼 수 있다.

 

다만, 화면에서는 사라진다.

local storage에서 값을 가져오자. → getItem()

 

최초의 화면이 렌데링될 때, 최초의 자바스크립트가 해석될 때 이 savedDate라고 하는 변수에 저장된 값이 있는지 조건문을 통해 확인한다.

 

만약, savedDate에 값이 있다면 starter()를 실행시켜 카운터가 유지되는 것을 보여주면 되고

없다면 d-day를 입력받는 초기화면을 보여주면 된다.

 

이를 위해 starter()에도 변화가 필요하다.

 

매개변수를 받게 하고

매개변수에 값이 있다면 dateFormMaker()를 작동시켜 inputbox에 있는 값을 가져오는 행위를 생략할 수 있다.

 

그러고나면, 날짜를 입력해서 d-day-counter를 실행시킨 후에

 

새로고침을 해도 카운터가 유지되는 것을 볼 수 있다.

 

그런데 [타이머 초기화] 버튼을 누르면

 

처음에는 초기화면으로 돌아오지만, 새로고침을 하면 이전 카운터가 계속 돌아간다.

 

초기화 시키면 localStorage에 있는 데이터가 삭제되도록 하자

 

그러면 [타이머 초기화]버튼을 눌렀을 때 더이상 이전 카운터가 실행되지 않는다

 

그런데, 이러면 올바른 날짜를 넣고 새로고침해도 이전 카운터가 실행 안된다.

starter()에도 setClearInterval()가 있기 때문

 

그래서 "saved-date"가 저장된 뒤에도 setClearInterval()을 통해 removeItem이 실행된다.

 

그렇다면 starter()에서 localStorage에 날짜를 저장하지 않고 counterMaker()에서 날짜를 계산하기 전에 저장하면 된다.

함수에 들어온 매개변수와 위에서 가장 처음 날짜를 받은 savedDate를 비교하여 둘이 같다면 해당 날짜로 counter 계산을 하고 다르다면 최신 날짜인 매개변수의 날짜로 바꿔서 저장한 후 계산하면 된