JSを使用してSessionStorageの値を取得する方法

この記事では、js を使用して sessionstorage の値を取得する方法を紹介します。まず、取得した情報を出力するか、alert() します。次に、静的ページでの sessionStorage の使用は、動的ページでの接続と同じです。データベースとしての詳細は、この記事を参照してください

sessionStorageを取得する意味

まず、取得した情報を出力したり、alert(); , 静的ページでは、sessionStorage を使用すると、動的ページでデータベースに接続するのと同等になります

例: 前回の記事のプロジェクトを使用して、ボタン ボタンにキャリッジ リターン イベントを追加することができます。 jsのsessionStorageでページの入力を取得し、バックグラウンドで計算されたデータから情報を取得して表示することもできます。

これ以上ナンセンスではありません。コードを確認することが重要です:

具体的な実装

<script type="text/javascript">
    function login(){
      var username=window.document.getElementById("username").value;
      var password=window.document.getElementById("password").value;
      if(password=="123456")
      {
        window.sessionStorage.setItem("username", username);
        window.location.href="../index1.html" rel="external nofollow" ;
      }else{
        alert("密码错误请输入正确的密码，例如：123456！");
        return false;
      }
    }
</script>
<input type="text" id="username" class="11" placeholder="请输入真实姓名"/>
<input type="password" id="password" placeholder="请输入密码（默认密码123456）"/>
<input type="button" value="登录考试" onclick="login()">

上記のコードは、ユーザー名の値を取得して次のインターフェイスに渡します

そしてパスワードの値を取得します事前に設定した値と比較し、異なる場合はログインできません

<script>
   $(function () {
     var username= window.sessionStorage.getItem("username")
     $("#yhm").html("登录用户："+username)
     $("#name").html(username)
     if(window.sessionStorage.getItem("username")===null){
       alert("您还没有登录，请登录后重试！")
       window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
     }
     $("#esc").on("click",function(){
       window.sessionStorage.clear();
       window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
     });
  })
 </script>

前のページで入力した値を取得し、対応する位置に表示します

<p id="yhm"></p>

そして、 sessionStorage の値。そうでない場合は、自動的にログイン ページに戻り、対応するプロンプトが表示されます

イベントのクリック トリガー後に sessionStorage の値をクリアします

<script>
$("#esc").on("click",function(){
       window.sessionStorage.clear();
       window.location.href="Pages/index.html" rel="external nofollow" rel="external nofollow" rel="external nofollow" ;
     });
</script>

ID esc

<button id="esc" style="background-color: #FF0000">退出考试系统</button>

のボタンをクリックしてクリア イベントがトリガーされると、自動的にログインインターフェースに戻ります

上記は、皆さんのためにまとめたものであり、今後皆さんのお役に立てば幸いです。

関連記事:

pace.js および NProgress.js 読み込み進行状況プラグインの使用方法 (詳細なチュートリアル)

Vue コンポーネントのカスタム イベントについて (詳細なチュートリアル)

PHP クロージャーと匿名関数 (詳細なチュートリアル)

WeChat アプレットで 3 レベルのリンケージ セレクターを使用する方法

jQuery を使用してアコーディオン効果を実現する方法

以上がJSを使用してSessionStorageの値を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。