[노마드코더-바닐라JS로 크롬앱 만들기] javascript - localStorage 기능

[노마드코더 - 바닐라JS로 크롬앱 만들기]

localStorage 기능

 

localStorage를 통해 값을 저장하여 화면을 새로고침하거나 재접속 해도 저장된 값을 기억해 낸다.

const loginForm = document.querySelector("#login-form");

const USERNAME_KEY = "username";

const username = loginInput.value;

localStorage.setItem(USERNAME_KEY, username);



const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  paintGreetings(savedUsername);
};

 

Application탭에서 Local Storage를 보면 Key와 Value가 비어있는데

위에 코드와 같이 localStorage.setItem()을 지정해주면 input창에 값을 입력했을 때 오른쪽 화면과 같이 Local Storage에 입력이 된다

 

localStorage.setItem을 통해 저장한 항목을 localStorage.getItem을 통해 읽는다.

 

출처 : MDN WebDoxs(https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)