Local Storage를 활용하여 저장하기
key, value로 이뤄짐.
작은 DB를 사용한다고 보면 됨.
1. 메서드 사용방법
localStorage.setItem( a, b) => key: a, value:b로 저장한다는 의미
localStorage.getItem( a) => key: a에 저장된 value를 불러온다는 의미
그 외에
삭제 시에는
removeItem() 이런 식으로 사용함
콘솔창 메뉴에 애플리케이션을 선택하면 "로컬스토리지"항목이 좌측메뉴에 보인다.
우측 창에 키(key)와 값(value)이 있다
이곳에 우리가 입력한 값이 저장되도록 하는 것이다.
. js에 다음과 같이 추가해 준다.
localStorage.setItem("name", username);
2. 로컬 스토리지에 저장되는 값 확인
그런 다음 입력필드에 무언가 입력하고 enter를 누르면 로컬 스토리지에 저장되는 것을 확인할 수 있다.
키(key)에는 name이 저장되고, 값(value)에는 Jason이 저장되었다.
3. 조건문 만들기
이제 조건문을 완성해 보자.
즉 이 로컬 스토리지에 값이 없다면 form을 보여주고, greeting을 숨기고
스토리지에 값이 있다면 form을 숨기고, greeting을 보여주는 것이다.
const savedItem = localStorage.getItem(USERNAME_KEY);
if(savedItem === null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", handleLoginSubmit);
} else {
greeting.innerText = `Hello ${inputValue}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
해당 키에 저장된 값을 변수에 할당하고,
그 값이 없다면, loginForm을 보여주도록 하며, 버튼을 실행시키는 이벤트리스너도 이 안으로 포함시켜 옮겼다.
그렇지 않고 값이 있다면, 인풋값을 인사말로 넣어주고, 보여주는 것 까지 하도록 넣어준다.
전체 구문을 다시 확인해보면, 인사말을 입력해주고, 보여주는 부분이 중복되어 사용된다.
그래서 이 아래 구문을 하나의 함수로 다시 만들어주고, 중복을 없앤다.
greeting.innerText = `Hello ${inputValue}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
정리하면 다음과 같다.
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "name";
function handleLoginSubmit(event){
event.preventDefault();
const inputValue = loginInput.value;
localStorage.setItem(USERNAME_KEY, inputValue);
loginForm.classList.add(HIDDEN_CLASSNAME);
paintGreeting(inputValue);
}
function paintGreeting(inputValue){
greeting.innerText = `Hello ${inputValue}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
const savedItem = localStorage.getItem(USERNAME_KEY);
if(savedItem === null){
loginForm.classList.remove(HIDDEN_CLASSNAME);
loginForm.addEventListener("submit", handleLoginSubmit);
} else {
paintGreeting(savedItem);
}
첫 번째 function은 submit 버튼이 눌리면, 일어날 기능들이다.
일단 리프레쉬가 안 일어나도록 하고,
입력한 값을 로컬에 저장하고
로그인폼을 숨기고
인사말을 출력하라.
두 번째 function은 인사말 출력에 대한 기능을 별도로 뽑아놓은 것이다.
마지막 조건문은 저장된 상태에 따른 케이스 구분이다.
로컬에 저장된 것이 없다면, 로그인폼을 보여준다. submit 버튼 이벤트를 포함.
로컬에 저장된 것이 있다면, 인사말 function을 실행해라.
BR. h