TIL.9)入力値JavaScriptを記憶する

9699 ワード
JavaScript テキストリンク

🚨 Caution 🚨


これらはwecodeを準備して個人的に整理する内容です.
筆者が学んだ内容を理解して記録するのに役立つように書かれた内容.
筆者が理解した部分に基づいて書いた文章で、実際の内容とは少し違うかもしれません.
この点に注意してください
コンテンツへのフィードバックに感謝します.

💡 私の名前を覚えてください。


好きなバラエティ番組があります.
普段も密室脱出が好きで、よく友達と密室脱出に行きます.
だから大脱出このバラエティは私の人生のバラエティになりました...
大逃亡エピソード第1期エピソードには悪霊刑務所があり、
そこで“私の名前を覚えてください”という鬼の切なさがこのエピソードの主なポイントです
それほど切迫していませんが、今日ユーザーが名前を入力したとき
その名前を覚えているので、歓迎のページを作りたいです.

1.htmlを使用したフレームワークの作成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"  />
        <title>LOGIN</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
    	<h1 class="hidden"></h1>
        <form class="loginForm">
            <input type="text" placeholder="이름을 작성해 주세요"
            required maxlength="15">
            <input type="submit" value="LOG IN!">
        </form>
    <script src="LOGIN.js"></script>
    </body>
</html>
formTAGは大きなフレームを設定し、「classForm」の名前を設定します.
名前を入力するとh1TAGの内容が表示されます.h1ラベルは「hidden」に設定され、cssが表示されなくなりました.inputタグには内容を記入する必要があります.最大15文字以内に設定してください.

-結果


2.JSの使用


ユーザーがJSで名前を記入する場合、
hello文と一緒に名前を言う

▪️ Part.1:入力した名前を確認する

const loginForm = document.querySelector(".loginForm");
const loginInput = document.querySelector(".loginForm Input");
const hello = document.querySelector("#hello");

function submitLoginForm (event) {
    event.preventDefault();
    console.log(loginInput.value);
}

loginForm.addEventListener("submit", submitLoginForm);
まず、使用する複数のタグを変数に設定して、使用率を向上させます.functioninputタグに入力された名前はconsoleで表示するために、コードを作成しました.
ここでfunctionコードでイベントが発生しないようにします.event.preventDefault().
これによりsubmitの基本機能はリフレッシュされません.
その後、consoleにより入力値を表示できるコードが記述される.

▪️ Part.2:氏名を記入後、ウェルカムメッセージを書いてください

const loginForm = document.querySelector(".loginForm");
const loginInput = document.querySelector(".loginForm Input");
const hello = document.querySelector("#hello");

const HIDDEN = "hidden";

function submitLoginForm (event) {
    event.preventDefault();
    const username = loginInput.value;
    loginForm.classList.add(HIDDEN);
    hello.classList.remove(HIDDEN);
    hello.innerText = `Hello ${username}`;
}

loginForm.addEventListener("submit", submitLoginForm);
最初のJSコードでは、function部分はclassList属性を使用します.formタグを消去h1タグを出現させる.
ウェルカムメッセージを表示するためにコードを作成しました.

-結果


▪️ Part.3:名前の保存

function submitLoginForm (event) {
    event.preventDefault();
    const username = loginInput.value;
    localStorage.setItem("username", username);
    loginForm.classList.add(HIDDEN);
    hello.innerText = `Hello ${username}`;
    hello.classList.remove(HIDDEN);
}
ウェルカムメッセージが表示されますが、名前は保存されません.
オンラインになるたびに名前を入力する面倒があります.
作成した名前を保存する必要があります.localStorage.serItem関連コンテンツを格納するために使用することができる.

▪️ Part.4:ログインの保持


上の通りにすれば、リフレッシュしてログイン画面に戻ります.
今は名前も保存されているので、更新しても歓迎の言葉を残し続けます.
コードを変更します!
const loginForm = document.querySelector(".loginForm");
const loginInput = document.querySelector(".loginForm Input");
const hello = document.querySelector("#hello");

const HIDDEN = "hidden";
const USERNAME_KEY = "username";

function submitLoginForm (event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN);
    const username = loginInput.value;
    localStorage.setItem(USERNAME_KEY, username);
    hello.innerText = `Hello ${username}`;
    hello.classList.remove(HIDDEN);
}

const saveUsername = localStorage.getItem(USERNAME_KEY);

if (saveUsername === null) {
    loginForm.classList.remove(HIDDEN);
    loginForm.addEventListener("submit", submitLoginForm);
} else {
    hello.innerText = `Hello ${saveUsername}`;
    hello.classList.remove(HIDDEN);
}

-結果


ペヒはクールなコードを完成し、私の名前を覚えることができます.localStorageに格納されている名前を使用if使用文localStorageの値:
皆さんにウェルカムメッセージを見せて、なければログイン画面に入ることができます.
入力した値を覚えることで
私はずっとそのユーザーを覚える方法を勉強していますが、ログインは解除されていません.

要約すると...

  • .preventDefault()|一部のイベントの実行をブロックします.
  • .addEventListener()|ある行為によってある機能を生み出すことができる.
  • localStorage.serItem保存したい値を保存できます.
  • Hello ${username}=string接続の1つの方法
    • linux時間同期更新
    JavaScript:オブジェクト向けプログラミング(OOP)