자바스크립트 입문[Javascript] - 자바스크립트로 로그인 기능을 구현하기 (Local Storage) - (3)

2021-07-26

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

 

---

[Local Storage] 

 

저번 게시글에서는 유저가 username을 입력하면, loginForm을 hidden class를 이용해 숨기고, 

Hello, username이 나오는 것을 구현했습니다.

 

Saving Username

 

유저가 매번 username을 입력하는 것은 번거로우니 username을 저장하는 것을 해봅시다.

local stage를 이용해 저장할 수 있습니다.

 

local stage는 작업자도구에서 Application > Storage 에서 확인할 수 있습니다.

Storage에는 Session Storage, IndexedDB, Web SQL 등이 있지만 Local Storage가 가장 다루기 쉽습니다.

Local Storage는 기본적으로 키(key) 와 값 (value) 으로 이루어진 데이터를 저장할 수 있습니다.

 

기본적인 사용법은 아래와 같습니다.

 

// 키에 데이터 쓰기

localStorage.setItem("key", value);

// 키로 부터 데이터 읽기

localStorage.getItem("key");

// 키의 데이터 삭제

localStorage.removeItem("key");

// 모든 키의 데이터 삭제

localStorage.clear();

// 저장된 키/값 쌍의 개수

localStorage.length;

 

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

const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username"

function onLoginSubmit(event) {
	event.preventDefault();
	const username = loginInput.value;
	loginForm.classList.add(HIDDEN_CLASSNAME);
	localStorage.setItem("username", username);
	greeting.innerText = `Hello! ${username}`;
	greeting.classList.remove(HIDDEN_CLASSNAME)
}

loginSubmit.addEventListener("click",onLoginSubmit);

const savedUsername = localStorage.getItem("username");

console.log(savedUsername);

위와 같이 이제 유저가 username을 입력했을 때, Local Storage에 username이 저장됩니다.

 

Loading Username

 

유저의 네임이 Local Storage에 있다면, form을 보여주지 않고 바로 <h1> 을 보여주고

없다면 form을 보여주는 것을 구현해봅시다.

 

 

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

const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username"

function onLoginSubmit(event) {
	event.preventDefault();
	const username = loginInput.value;
	loginForm.classList.add(HIDDEN_CLASSNAME);
	localStorage.setItem("USERNAME_KEY", USERNAME_KEY);
	greeting.innerText = `Hello! ${USERNAME_KEY}`;
	greeting.classList.remove(HIDDEN_CLASSNAME)
}

const savedUsername = localStorage.getItem("USERNAME_KEY");

if(savedUsername === null) {
	loginForm.classList.remove(HIDDEN_CLASSNAME);
	loginSubmit.addEventListener("click",onLoginSubmit);
} else {
	greeting.classList.remove(HIDDEN_CLASSNAME);
	greeting.innerText= `Hello! ${savedUsername}`;
}

 

localStorage안에 있는 key와 value를 savedUsername으로 갖고옵니다.

만약 savedUsername이 null 이라면, 저장된 username이 없는 것이니 loginForm의 hidden을 없에서 loginForm을 나타내줍니다. 

그리고 submit을 눌렀을때, onLoginSubmit의 함수가 실행되도록 만들어줍닌다.

그렇지않을때, greeting의 hidden class를 제거해 greeting을 할 수 있도록 해줍니다.

 

이때 greeting.classList.remove(HIDDEN_CLASSNAME) ; greeting.innerText= `Hello! ${savedUsername}; 은 onLoginSubmit에서도 중복적으로 실행된 것이니 이를 함수로 만들어봅시다.

 

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

const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username"

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

function paintGreetings(username) { 
	const usernameThat = localStorage.getItem(USERNAME_KEY);
	greeting.classList.remove(HIDDEN_CLASSNAME);
	greeting.innerText= `Hello! ${usernameThat}`;
}

const savedUsername = localStorage.getItem("USERNAME_KEY");

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

위가 지금까지 Login 기능을 구현할 때 배운 것을 총동원해 만든 코드입니다. 

코드를 직접 짜는 것 뿐만아니라, 짜여진 코드를 읽어내면서 로직을 이해하는 것도 실력향상에 큰 도움이 됩니다.

지금까지 배운 내용을 복습해봅시다.

 

---

출처

 

[자바스크립트] 웹 스토리지 (localStorage, sessionStorage) 사용법

Web Storage API 사용하기 - Web API | MDN

 

노마드 코더 Nomad Coders