4 LOGIN

🔹 사용자 이름 기억
🔹 웹 페이지를 다시 불러와도 이름을 기억하고 있어야 함
🔹 사용자 이름이 기억되면 로그인 폼이 사라짐

localStorage를 사용

1. setItem() - key, value 추가
2. getItem() - value 읽어 오기
3. removeItem() - item 삭제
4. clear() - 도메인 내의 localStorage 값 삭제
5. length - 전체 item 갯수

🔸 html

 <form class="hidden" id="login-form">
      <input
        required
        maxlength="15"
        type="text"
        placeholder="what is your name?"
      />
      <button id="logbtn">log in</button>
    </form>

    <h1 id="greeting" class="hidden"></h1>

🔸 js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const USERNAME_KEY = "username";
const HIDDEN_CLASSNAME = "hidden";

function onLoginSubmit(event) {
  event.preventDefault();
  const username = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);

  //스토리지에 저장
  localStorage.setItem(USERNAME_KEY, username);

  paintGreetings(username);
}

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

const savedUsername = localStorage.getItem(USERNAME_KEY);
if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  paintGreetings(savedUsername);
}

🔸 css

.hidden {
  display: none;
}

---