4.6 Loading Username

講義
lsが空の場合は、フォームを表示してから、今やっていることをすることができます.ただしlsにユーザ情報があればformを表示できません.
では、まずlsにユーザー情報があるかどうかを確認します.
まずlsデータをすべて削除します.
コンソール上のローカルストレージ.getItem(「username」)を入力するとnullが出力されます.

const savedUsername = localStorage.getItem("username");
if(savedUsername === null){
    //show the form
} else{
    // show the greetings
}

これでいいです.

「username」がずっと出ているようなので変数として指定します.
=>stringエラーが発生する可能性があります!変数として指定すると、エラーが発生したときに未定義の変数が通知されるので、変数として指定することを忘れないでください.

しかし、私たちの元の登録方式は最初から出てきて、登録方式と挨拶を隠すようにしていました.<form class="hidden" id="login-form">今更新しても何も表示されません.

const USERNAME_KEY = "username";
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null){
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit",onLoginSubmit);
} else{
    greeting.innerText = `Hello ${savedUsername}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

もういいよ!!終わったと思ったが、ちょっとした問題があった.

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 onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY,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{
    greeting.innerText = `Hello ${savedUsername}`;  <---- 중복
    greeting.classList.remove(HIDDEN_CLASSNAME);    <---- 중복
}

コード全体で重複する部分を関数にしたほうがいいと思います.
コードはできるだけ繰り返しを減らすべきで、簡潔で明瞭に書いたほうがいいです!(๑•̀きょうどう́)و✧

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

完了したコード

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 onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    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);
}

初めてサイトに入ると、名前を入力するヒントが表示されます.名前を入力すると、Hellominiはlsに格納されているため、リフレッシュしてもHellominiが出力されます.