username이 입력된다면 다음의 동작이 실행되도록 해보자.

  1. username 입력 form 숨기기
  2. username을 반영하여 Hello 라며 인사하는 텍스트 드러내기
  3. 이것들을 페이지 새로고침 없이

/* style.css */
 
.hidden {
  display: none;
}

html 태그에 부여해줄 용도로 .hidden 클래스의 css 코드를 정의해준다.


// app.js
 
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
 
// string만 포함된 변수는 대문자로 표기
// string을 저장할 때 사용
// 중요한 정보를 담지 않은 경우
const HIDDEN_CLASSNAME = "hidden";
 
function onLoginSubmit(event){
  event.preventDefault();                           // 1. 기본동작 실행(페이지 새로고침) 제거
  const username = loginInput.value;  
  loginForm.classList.add(HIDDEN_CLASSNAME);        // 2. loginForm .hidden 부여 -> 안 보이게
 
  // greeting.innerText = "Hello " + username;      
  greeting.innerText = `Hello ${username}!`;        // 3. h1의 내용으로 Hello + username 부여
  greeting.classList.remove(HIDDEN_CLASSNAME);      // 4. greeting .hidden 제거 -> 보이게
}
 
loginForm.addEventListener("submit", onLoginSubmit)

코드 내용

  • loginForm에 submit이 전달되면 onLoginSubmit 함수 호출
  • 페이지 새로고침 없이 loginForm 안 보이게 하고 greeting(h1)에 username 변수 넣어 인사
  • hidden 클래스의 넣고 뺌을 통해 보이고 안 보이게 조절
  • 자주 사용하는 hidden 클래스는 변수로 저장하여 사용

참고 1 : 대문자 변수 저장

  • string만 포함된 변수는 대문자로 표기
  • string을 저장할 때
  • 중요한 정보를 담지 않은 경우

참고 2 : string 표현

  • 그동안 '+'를 사용해서 문자열을 연결
  • backtick(`)을 사용하면 파이썬의 f-string처럼 변수를 반영한 string 사용 가능
  • 변수의 삽입은 ${var}의 형태
greeting.innerText = `Hello ${username}!`;

문제점

그런데 문제점이 있다. 새로고침할 때마다 form을 다시 입력해주어야 한다는 것.

이전 입력값을 기억하게 할 수는 없을까?


  • 웹에는 IndexedDB, Web SQL, Cookies, Trust Token 등 다양한 Storage가 있다.
  • 이중 Local Storage가 가장 조작이 간단

  • local storage에 정보를 저장하는 방법
  • setItem(key, value) 형태로 저장
localStorage.setItem("myCat", "Tom");

위의 예시의 경우 key는 myCat, value는 Tom


  • localStorage에 저장된 정보를 사용할 때
  • getItem(key) 형태로 사용
  • key에 해당하는 값을 불러오는 것
localStorage.getItem("myCat");

  • localStorage에 불필요한 item 삭제
  • removeItem(key) 형태로 사용
localStorage.removeItem("myCat");

이전 코드를 개선해보도록 하자.


가. form과 #greeting 모두 hidden 클래스 설정

<!-- index.html -->
 
<form id="login-form" class="hidden">
  <input
  required
  maxlength="15"
  type="text"
  placeholder="What is your name"
  >
  <button>Log In</button>
</form>
 
<h1 id="greeting" class="hidden"></h1>
  • 둘 다 hidden으로 두고 localStorage에 username key가 있는지의 여부에 따라 hidden 제거

나. localStorage에 username 있는지 여부 확인

const USERNAME_KEY = "username";
const savedUsername = localStorage.getItem(USERNAME_KEY);
 
...
 
if(savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit)
} else {
  // show the greeting
  paintGreetings(savedUsername);
}
  • localStorage에 USERNAME_KEY("username")의 key로 getItem
  • key가 있으면 value, 없으면 null 이 savedUsername에 저장
  • null이면 form을 드러내야 하고, 아니라면 username 정보로 greeting을 보여야 한다.

다. paintGreetings() 함수 정의

function paintGreetings(username){
  greeting.innerText = `Hello ${username}!`
  greeting.classList.remove(HIDDEN_CLASSNAME);
}
  • onLoginsubmit() 함수에서도 사용하는 코드로, 중복 제거를 위해 함수화
  • username이 저장된 경우에만 사용
  • #greeting(h1 태그)의 text로 username와 관련 text 넣음
  • #greeting 태그에 hidden 클래스 제거

라. onLoginSubmit() 함수 개선

function onLoginSubmit(event){
  event.preventDefault();                         
  loginForm.classList.add(HIDDEN_CLASSNAME);      
 
  const username = loginInput.value;                
  localStorage.setItem(USERNAME_KEY, username);    
  
  paintGreetings(savedUsername);
}
  • 자주 사용하는 string을 변수로 지정하여 교체
  • string이 틀린 것은 오류 메시지로 확인이 어렵지만, 변수명이 틀린 경우 확인이 용이하기 때문

app.js 전체 코드

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";
 
const savedUsername = localStorage.getItem(USERNAME_KEY);
 
 
function onLoginSubmit(event){
  event.preventDefault();                         
  loginForm.classList.add(HIDDEN_CLASSNAME);      
 
  const username = loginInput.value;                
  localStorage.setItem(USERNAME_KEY, username);    
  
  paintGreetings(savedUsername);
}
 
function paintGreetings(username){
  greeting.innerText = `Hello ${username}!`
  greeting.classList.remove(HIDDEN_CLASSNAME);
}
 
if(savedUsername === null) {
  // show the form
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit)
} else {
  // show the greeting
  paintGreetings(savedUsername);
}