[JavaScript] JS로 크롬 만들기 6. hidden과 localStorage

Input data submit

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

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

.hidden 클래스 css

/* style.css */

.hidden {
  display: none;
}

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

js 코드

// 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을 다시 입력해주어야 한다는 것.

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

localStorage

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

저장 : setItem

• local storage에 정보를 저장하는 방법
• setItem(key, value) 형태로 저장

localStorage.setItem("myCat", "Tom");

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

사용 : getItem

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

localStorage.getItem("myCat");

삭제 : removeItem

• 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);
}