JS Clone Project [Login] - 3, Saving User Input

Saving User Input using Local Storage. 

[Login] - 2 에서 보았던 classList.add 와 classList.remove 는 많이쓰이는 방법이고, 이를 더욱 쉽게 쓰기 위해 Local Storage 라는 API 를 활용해 유저 Input 을 저장해보려 한다. 

 

- setItem

Local Storage 에 setItem 을 활용하여 정보를 저장할수 있다. 

Example) 

*F12 -> 애플리케이션 을 가보면, 저장용량애 Local Storage, Session Storage, indexedDB 등 많은 정보를 볼수있다  

• localStorage.setItem(Key, value) --> 값을 저장 
• localStorage.getItem(Key) --> 저장된 값 불러옴
• localStorage.removeItem(Key) --> 저장된 값 삭제

 

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const link = document.querySelector("#naver");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";

console.log(loginInput.outerHTML);


function onLoginSubmit (data){
    data.preventDefault();
    const username = loginInput.value;
    console.log(username);

    loginForm.classList.add(HIDDEN_CLASSNAME);
    
    //Save user Input using "localStorage.setItem"
    localStorage.setItem("usrName",username);
    greeting.innerHTML = `Welcome ${ localStorage.getItem("usrName")} !`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
 
} 

// submit happens when pressing "enter" /  button within a Form element
loginForm.addEventListener("submit",onLoginSubmit); 
link.addEventListener("click",onLoginSubmit);

위 코드를 실핼시키면, 성공적으로 WEB 로컬 스토리지에 usrName 이 저장되는 것을 확인할수 있다. 하지만, 세로 고침을 하면, 다시 Form 이 표시된다. 이 문제를 아래와 같이 풀어보았다. 

 

- usrName 이라는 변수가 local Storage 에 저장이 되어 있다면, form class 를 "hidden" 으로, 아니면, visible 하게 나타내기.

const loginInput = document.querySelector("#login-form input");
const loginForm = document.querySelector("#login-form");
const link = document.querySelector("#naver");
const greeting = document.querySelector("#greeting");



//It is better to save as a constant variable when there are String type of variables being used repeatly  
const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "usrName"



function onLoginSubmit (data){
    data.preventDefault();
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY,username);
    loginForm.classList.add(HIDDEN_CLASSNAME);
    paintGreetings(username);

} 

function paintGreetings(usrName){
    greeting.classList.remove(HIDDEN_CLASSNAME);
    greeting.innerHTML = `Welcome ${usrName} !`;
}

 //1. Check whether there are local storage variable called "usrName"
 const savedUsername = localStorage.getItem(USERNAME_KEY);
 console.log(savedUsername);
if (savedUsername === null){
    //Show form 
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    //submit happens when pressing "enter" /  button within a Form element
    loginForm.addEventListener("submit",onLoginSubmit); 
}
    else {
    //Show greetings
    paintGreetings(savedUsername);
}

//Hyper-link example 
link.addEventListener("click",onLoginSubmit);

*HTML 요소, FORM 과 h1 의 class 를 모두 Hidden 으로 바꾸워 준다.