← 기록 목록

JavaScript

이름을 저장하고 인사말 표시하기

입력한 이름을 localStorage에 저장하고, 새로고침 후에도 인사말을 표시하는 예제다. 서버에서 신원을 확인하는 실제 로그인 기능은 아니다.

HTML

<form id="login-form" class="hidden">
  <input required maxlength="15" type="text" placeholder="이름을 입력하세요">
  <button type="submit">확인</button>
</form>
<h1 id="greeting" class="hidden"></h1>

required로 빈 입력을 제한하고, maxlength로 입력 길이를 제한한다.

CSS

.hidden {
  display: none;
}

JavaScript

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';

function paintGreeting(username) {
  greeting.textContent = `Hello ${username}`;
  greeting.classList.remove(HIDDEN_CLASSNAME);
}

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value.trim();
  if (!username) return;

  loginForm.classList.add(HIDDEN_CLASSNAME);
  localStorage.setItem(USERNAME_KEY, username);
  paintGreeting(username);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener('submit', onLoginSubmit);
} else {
  paintGreeting(savedUsername);
}

동작 순서

  1. 저장된 이름이 없으면 입력 폼을 표시한다.
  2. 폼을 제출하면 preventDefault()로 기본 새로고침 동작을 막는다.
  3. 입력한 이름을 저장하고 폼을 숨긴다.
  4. paintGreeting()으로 인사말을 표시한다.
  5. 다음 방문에서는 저장된 이름을 읽어 인사말을 표시한다.

localStorage.setItem()은 값을 저장하고 getItem()은 저장된 값을 읽는다. 해당 키가 없으면 getItem()은 null을 반환한다. 저장된 데이터를 지우려면 localStorage.removeItem(USERNAME_KEY)를 사용한다.

참고