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

TOC

• Input data submit
  • .hidden 클래스 css
  • js 코드
• localStorage
  • 저장 : setItem
  • 사용 : getItem
  • 삭제 : removeItem
  • 적용

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