스톱워치 프로젝트: localStorage에 스톱워치 시간 저장 및 불러오기

프로그램 실행 시 localStorage가 비어있는지 확인하고, 비어있지 않다면(저장된 데이터가 있다면) 데이터를 불러오게 하였다. 데이터를 변경하면서(초기 리셋값은 모두 0) 화면에 보여지는 값도 변경해 주었다. 

const browserTimeData = localStorage.getItem("stopwatch");
if (browserTimeData !== null) { //localStorage에 데이터가 저장되어 있다면
  const parsedData = JSON.parse(browserTimeData);	//JSON 형태로 얻어온 데이터를 해석한다.
  hour = parsedData[0];
  min = parsedData[1];
  sec = parsedData[2];
  tenMillisec = parsedData[3];

  appendHour.textContent = String(hour).padStart(2, "0"); //2자리. 0으로 앞자리 채우기
  appendMin.textContent = String(min).padStart(2, "0");
  appendSec.textContent = String(sec).padStart(2, "0");
  appendTens.textContent = String(tenMillisec).padStart(2, "0");
}

 

 

stop 버튼을 누를 때마다 시간을 localStorage에 저장하게 하였다. 

//stop
stop_btn.onclick = function () {
  window.clearInterval(intervalId); //setInterval이 반환한 id를 인자로 넣으면 그 id를 가진 setInterval이 동작이 멈춘다.
  stop_btn.style.display = "none";
  start_btn.style.display = "";
  lap_btn.style.display = "none";
  reset_btn.style.display = "";

  localStorage.setItem(	//localStorage에 데이터 저장
    "stopwatch",
    JSON.stringify([hour, min, sec, tenMillisec])
  );
};

 

 

reset 버튼을 누를 때는 localStorage에 저장된 데이터를 삭제하였다.

reset_btn.onclick = function () {
  window.clearInterval(intervalId);
  document.getElementById("lap_record").style.visibility = "hidden";
  for (let i = 0; i < lap_num - 1; i++) {
    table.deleteRow(-1);
  }
  hour = 0;
  min = 0;
  sec = 0;
  tenMillisec = 0;
  appendHour.textContent = "00";
  appendMin.textContent = "00";
  appendSec.textContent = "00";
  appendTens.textContent = "00";
  lap_num = 1;
  document.title = "timeqlife - Stopwatch";

  localStorage.removeItem("stopwatch");
};

 

 

localStorage

• setItem(key, value) – 키-값 쌍 보관
• getItem(key) – 키에 해당하는 값 받아오기
• removeItem(key) – 키와 해당 값 삭제
• clear() –  도메인 내의 localStorage 값 삭제
• key(index) – 인덱스(index)에 해당하는 키 받아오기
• length – 저장된 항목의 개수

 

 

참고 자료

localStorage

Window: localStorage property - Web APIs | MDN

 

localStorage와 sessionStorage

 

[Javascript] localStorage 사용법 (읽기, 쓰기, 삭제, 키목록 등)

 

localStorage 데이터 형식 변환 (JSON.stringify(), JSON.parse())

 

javascript localstorage 저장/JSON.stringify(), JSON.parse()

 

자리수만큼 특정문자 채우기

[js] 문자열 앞 혹은 뒤에 자리수만큼 특정 문자(0, 공백) 채우기