🗓 진행일: 3월 15일
📎 4.5 ~ 4.7 (+과제)

4.5 Saving Username

localStorage의 존재에 대해 알게 되었어요

F12 > Application > Local Storage에 들어가면 localStorage로 저장한 값을 알 수 있네?

app.js

function onLoginSubmit(event) {
    event.preventDefault(); 
    const username = loginInput.value;
    localStorage.setItem("username", username);
}

4.6 Loading Username

자, 네,
이제 localStorage에 값이 있으면 이름을 보여주고 아니면 form을 보여줘서 입력을 받습니다
--> 새로고침을 해도 입력한 이름이 보이도록

1. localStorage에 USERNAME_KEY로 저장된 데이터를 불러온다
2. 데이터가 없으면 form에 존재하는 HIDDEN_CLASSNAME 클래스명을 지워주고, 이벤트 핸들러를 추가한다 (form으로부터 오는 submit)
3. 데이터가 존재하면 paintGreetings 함수를 실행한다 (데이터 인수로 보내주기)
4. paintGreetings: 인수를 받아와서 h1 태그에 넣어주고, 해당 h1 태그에 있는 HIDDEN_CLSSNAME 클래스 제거
5. 이벤트 핸들러에서 이벤트를 가져왔다면? onLoginSumbit 실행
6. onLoginSubmit: form에 HIDDEN_CLASSNAME 넣어서 안 보이게 하고, input에서 값 가져와서 localStorage에 넣어주고, paintGreetings 실행

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

// 자주 사용하게 되는 string들은 이렇게 const로 만들어주기
const HIDDEN_CLASSNAME = "hidden"; 
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
    event.preventDefault(); 
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username); // localStorage에 값 세팅
    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);
}

4.7 Super Recap

recap 했어용 영어 듣기 테스트 하는 거 같다