ブラウザがデータを格納する方法

前回のレッスンでは、ログインした入力値を使用して名前を付けることに成功しました.
このレッスンでは、ブラウザをリフレッシュしながら名前を変更しない方法を学びました.
まず、過去の時間にonloginusbmitを利用して
ぼうし
非表示クラスをformに適用して、入力データの表示を回避します.
h 1の内部テキストに벡틱を適用して文章を埋め込む
また,既存の非表示者に適用するプロセスをクリアする.
ただし、このレッスンではlocalstrageを使用して入力したデータ値を保存します.
まず、コンソールウィンドウでlocalstrageを使用します.setItem("username", "username");適用すると、
コンフィギュレーションウィンドウアプリケーションセクションに名前が格納されていることがわかります.
このとき前はkey値、後ろはvalueです.すなわち
localstrage.setItem("username", "nico");

このように適用されることがわかります.
次に、コンソールウィンドウでlocalstorageを使用します.getItem("username");入力した場合
「nico」の値が得られます.
これは、「ローカルストレージの値がusernameというオブジェクトに価値がある場合」を意味します.
form:noneを表示し続けます.次のように処理
h 1上のレベル隠し線を削除!このように命令することもできます.
まず、次の値を入力したらlocalstorageに保存します!もうできました.

function onLoginSubmit(event) {
  event.preventDefault();
  const yourName = loginInput.value;
  loginForm.classList.add(HIDDEN_CLASSNAME);
  localStorage.setItem(USERNAME_KEY, yourName);
  gretting.innerText = `Hello ${username}`;
  gretting.classList.remove(HIDDEN_CLASSNAME);
}

この場合、入力入力入力値を入力すると、上記の動作が発生します.
実際に保存したユーザー名を使用して条件文を作成し、
「ローカルストレージの値がusernameの場合、オブジェクトの値がnullであるかどうかに応じて、別の形式またはh 1が表示されます.」
デザインは以下の通りです.

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
  loginForm.classList.remove(HIDDEN_CLASSNAME);
  loginForm.addEventListener("submit", onLoginSubmit);
} else {
  gretting.innerText = `Hello ${savedUsername}`;
  gretting.classList.remove(HIDDEN_CLASSNAME);
}

このプロシージャを実行すると、リフレッシュしても
localstorageにデータがある場合、画面は変わりません.
ただここに踏まれたコードがあります.
図面部分のコードです.この部分を2回繰り返し、再包装します.

これは改造された現状です.対応するコードを見て理解できれば問題ありません.
今もう一度見て、何を言っているのか分からない.
書くことから勉強し直さなければならない.
2022-02-26