4.5 Saving Username

講義
local storage
valueを格納する方法を学びます!プレイヤーに質問するたびに面倒くさい
いくつかのものを貯蔵するのはよく使われる機能です.APIが存在する可能性があります.ブラウザで何かを無料で覚える機能があります.そのAPI名はlocalstorageです.
コンソールにlocalStorageと入力して定義を確認します.localstorageでは、ブラウザに何かを保存できます.だからこれから使ってもいいです.localstorageに何が含まれているかを表示するには、開発者ツールを使用します.우클릭 > 검사 > Application > Storage > local storagelocalstorageのほかにも複数のリポジトリがあり、localstorageが最も扱いやすい.
今は空であることを確認することができて、後でこれを保存してあれを保存して、あなたはそれが変わったことを見ることができます!
setItem
localStorage.setItem(保存する値の名前、保存する値):lsに情報を格納できます.
コンソール上のローカルストレージ.setItem(「username」,「mini」)を入力してlsに格納されていることを確認します.
Key = username/Value = mini
getItem
localStorage.getItem(値名):保存した値を読み込むことができます.
localStorage.getItem(「username」)を入力して「mini」を出力します.
removeItem
localStorage.removeItem(値名):保存した値を削除します.
localStorage.removeItem(「username」)miniが削除されます.
今私たちがしなければならないのは、ユーザーが名前を提出したときにlsに保存することです.

function onLoginSubmit(event){
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    const username = loginInput.value;
    localStorage.setItem("username",username); <--- 수정된 부분
    greeting.innerText = `Hello ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

更新後もフォームが表示されます.名前はlsから消えませんが、これは私たちが望んでいるものではありません.lsで名前を保存してリフレッシュしますが、Hellominiを維持するのは私たちが望んでいる...!;-;
次の授業
次のレッスンでは、まずlsにユーザー名があるかどうかを確認し、存在する場合はログインフォームではなくh 1要素を表示します.ただしlsにユーザ情報がない場合はformを先に表示させます.