(Javascript) 크롬 개발자 도구 Local Storage 활용

구글 크롬 브라우저의 개발자 도구에서 Application 탭을 보면 왼쪽에 Local Storage라고 확인이 된다.로컬 스토리지는 쿠기나 세션과 같이 데이터를 저장하는 장소 중 하나이다. 로컬 스토리지의 데이터 저장 기간은 만료가 없고 항상 문자열로만 저장이 되어야 한다.

 

메소드

getItem : 로컬 스토리지에 저장되어 있는 데이터 값을 불러오는 메소드

setItem : 로컬 스토리지에 데이터를 저장하는 메소드

 

const greeting = document.querySelector("h1");
const yourName = localStorage.getItem("name");
if (yourName === null) {
   const name = prompt("이름을 입력해주세요.");
   localStorage.setItem("name", name);
   greeting.innerHTML = `안녕하세요. ${name}`;
} else {
   greeting.innerHTML = `안녕하세요. ${yourName}`;
}

Local Storage 에 저장된 Key todos에 Value 가 "apple"과 "banana"임을 알 수 있다.

해당 페이지를 새로 고침해도 로컬 스토리지에 저장된 데이터는 지워지지 않는다.