📚 [JS] 로컬스토리지에 데이터 저장하고 출력하기

로그인 버튼 누르면 로컬스토리지에 저장과 동시에 다른 Ul 보여주기

 

 

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 = "username";

function onLoginSubmit(event) {   // 서브밋 이벤트 발생 시 처리
    event.preventDefault(); //브라우저가 submit 새로고침을 발생시키려고 할때 막아 줌
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    paintGreetings(username);
}

function paintGreetings(username){    // 로그인 후 UI 처리
    greeting.innerText = `${username} 님 환영합니다!`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if(savedUsername === null){    // 로그인 체크
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", onLoginSubmit);  // 서브밋 발생 시 onLoginSubmit 함수 실행
}else{
    paintGreetings(savedUsername);
}

---

• setItem() - key, value 추가
• getItem() - value 읽기