[React] #15. 反応器で簡単にログインを実施しましょう.

まずLocalStorageとSessionStorageの間に...

何を選ぶべきか考えなければならない.localStorageは、ブラウザを閉じても自動ログインや期限切れのセッション(?)などのデータを保持するセキュリティ・ホールです.機能を実装するために使用される場合があり、セッションストレージはブラウザを閉じると消え、半揮発性になります.どちらもストレージであり、リポジトリとしてしか機能しません.

会话です。会議とは程遠い。

セッションをコンソールに格納することで、key:valueオブジェクトであることを確認できます.

{"key1":"blahblah","key2":"exoluse"}

加えて、ブラウザを開く限り、絶対に期限切れになりません.(リポジトリなので…)私たちがよく考えているようなシーンは期待できません.ただの倉庫です.

宣言は..。

let sessionStorage = window.sessionStorage;

データを格納するsetItem()

ログイン機能が実現しても、IDを保存してみます.

sessionStorage.setItem("loginId", loginId);

データをロードするgetItem()

ログイン後にロードします.

sessionStorage.getItem("loginId");

removeItem(「key」)データの選択と削除に使用

sessionStorage.removeItem("loginId")

すべて削除する場合は、()をクリアします。

sessionStorage.clear()

おおよそこのように実施されている

[App.js]
import Login from './login/Login';
import './App.css';

function App() {
  return (
    <div className="App">
      <Login />
    </div>
  );
}

export default App;

[./login/Login.js]
import { useState } from "react";

function Login() {

    let [loginId, setLoginId] = useState("");
    let [loginPassword, setLoginPassword] = useState("");
    let [savedLoginId, setSavedLoginId] = useState("");
    let [savedLoginPassword, setSavedLoginPassword] = useState("");

    let sessionStorage = window.sessionStorage;
    // let sessionStorage = window.localStorage;

    return (
        <>
            <div>
                ID : <input type="text" size={20} onChange={ (e)=>{
                    setLoginId(e.target.value)
                } } />
            </div>
            <div>
                PW : <input type="password" size={20} onChange={ (e)=>{
                    setLoginPassword(e.target.value)
                } } />
            </div>

            <div>
                <button onClick={ ()=>{ 
                    sessionStorage.setItem("loginId", loginId);
                    sessionStorage.setItem("loginPassword", loginPassword);

                    setSavedLoginId(sessionStorage.getItem("loginId"));
                    setSavedLoginPassword(sessionStorage.getItem("loginPassword"));
                } }>Login</button>

                <button onClick={ ()=>{
                    sessionStorage.clear();
                    setSavedLoginId(sessionStorage.getItem("loginId"));
                    setSavedLoginPassword(sessionStorage.getItem("loginPassword"));
                } }>Logout</button>

                <button onClick={ ()=>{
                    sessionStorage.removeItem("loginId");
                    setSavedLoginId(sessionStorage.getItem("loginId"));
                } }>loginId 삭제</button>

            </div>

            <div>
                sessionStorage에 저장된 loginId는 {savedLoginId} 이고 loginPassword는 {savedLoginPassword} 이다. 
            </div>
            <div>
                { JSON.stringify(sessionStorage) }
            </div>

        </>
    )
}


export default Login;

demo

ログイン済み

ログアウト済み

loginIdの削除