Review about entername.js

entername.js

const enterNameForm = document.querySelector(".name__form");
const enterNameInput = enterNameForm.querySelector(".name__form input");
const greeting = document.querySelector("h1");

const nameSubmit = ((event) => {
    event.preventDefault();
    enterNameForm
        .classList
        .add("hidden");
    const userName = enterNameInput.value;
    localStorage.setItem("userName", userName);
    // save data to local storage
    greeting.innerText = `${userName}'s to do List`;
    greeting
        .classList
        .remove("hidden");
})

const getUserName = localStorage.getItem("userName");
if (getUserName === null) {
    enterNameForm
        .classList
        .remove("hidden");
    enterNameForm.addEventListener("submit", nameSubmit);
    // show the form
} else {
    greeting
        .classList
        .remove("hidden");
    greeting.innerText = `${getUserName}'s to do List`;
    // show the greeting
}

CSS에 hidden 클래스 생성하기

.hidden{
    display:none;
}

버튼 클릭시 페이지가 새로고침 되는거 막은 후 input 사라지게하기

const nameSubmit = ((event) => {
    event.preventDefault(); 
    enterNameForm
        .classList
        .add("hidden"); // enternameForm에 hidden클래스를 추가시켜 사라지게 한다.
  . . . . . .

localstorage에 username저장하기

localStorage.setItem("userName", userName);
    // save data to local storage
    greeting.innerText = `${userName}'s to do List`;
    greeting
        .classList
        .remove("hidden");

저장한 후에는 h1 제목의 hidden 클래스를 제거해주면서 innerText를 설정해줘서 원하는 문구를 설정한다.

허나 여기까지만 한다면 input에 username을 입력한 뒤에 설정해준 ${username}'s to do List가 뜰 것이다.

하지만 페이지를 새로고침하면 다시 username을 입력하라는 input창이 뜰 것이다.

우리는 새로고침을 하더라도 ${username}'s to do List가 계속 유지되기를 원한다.

localStorage에 있는 username

const getUserName = localStorage.getItem("userName");
if (getUserName === null) {
    enterNameForm
        .classList
        .remove("hidden");
    enterNameForm.addEventListener("submit", nameSubmit);
    // show the form
} else {
    greeting
        .classList
        .remove("hidden");
    greeting.innerText = `${getUserName}'s to do List`;
    // show the greeting
}

if 문을 사용하여 만약 입력된 값이 없거나 삭제되어서 null상태이면 form에 있는 hidden클래스를 삭제해서 input란이 나오게 한다.

else 즉 username이 이미 있는 경우에는 창을 새로고침하더라도 ${username}'s to do List가 유지되도록 greeting의 hidden 클래스를 삭제해준다.