JS localStorage 사용하기
저번시간에는 html의 기본동작을 막을 수 있는 preventDefault 함수를 살펴봤다.
오늘은 localStorage에 데이터를 저장하고 가져오는 함수를 공부했다.
1. localStorage.setItem()
localStorage에 원하는 값을 원하는 키와 매핑해서 저장할 수 있다.
[index.js]
const USERNAME_KEY = 'username';
function onLoginSubmit(info) {
info.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME)
localStorage.setItem(USERNAME_KEY, username);
greeting.innerText = `Hello ${username}`
greeting.classList.remove(HIDDEN_CLASSNAME)
}
2. localStorage.getItem()
localStorage에 키가 있다면 값을 가져올 수 있는 함수다.
[index.js]
const savedUsername = localStorage.getItem(USERNAME_KEY);
3. localStorage에 저장된 값 유무에 따라 분기
getItem(${localStorageKey})
localStorage에 저장된 키가 있으면 해당 값을 반환
없으면 null 값을 반환한다.
[index.js]
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){
loginForm.classList.remove(HIDDEN_CLASSNAME)
loginForm.addEventListener('submit', onLoginSubmit);
} else {
paintGreetings(savedUsername);
}
