web storage

카운트를 만들어서 문제없이 돌아가는데
화면을 새로고침 하면 다시 처음 화면으로 돌아가 버림

언제든 해당 페이지를 다시 열었을 때 기존 입력한 값을 기억하여 계속해서 카운터가 유지되도록 해보자.

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

이번 타이머에 적용 시키고 싶은 방식은 한번 입력하면 언제든 다시 들어갔을때 해당 값이 기억되어야 하니 Local Storage 방식으로 할것.

local Storage 접근 방법

localStorage.setItem(key,value)

key - value 형식으로 위처럼 저장이 가능함

localStorage.setItem('saved-date',targetDateInput)

값을 위처럼 입력 했다면

이렇게 key-value 형식으로 로컬 스토리지에 저장이 된걸 볼 수 있음

f5를 눌러서 새로고침해도 스토리지에는 남아있음.

이제 해당 값을 가져와서 사용해보자

localStorage.getItem(key)

해당 값이 필요한 부분에서 getItem 으로 key 값을 입력해서 value 값을 가져올 수 있다.

if 문을 사용해서 현재 storge 에 값이 있으면 해당 값을 사용,
없으면 기존 코드대로 동작하게 하도록 수정하면

새로고침 했을때 타이머가 유지되고 있는걸 볼 수 있다.

또한 타이머 초기화를 눌렀을때 localStorage의 값을 삭제하기 위해 해당 버튼의 함수 부분에

localStorage.removeItem(key);

를 추가하여 초기화가 가능함