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

亚连
リリース: 2018-06-12 14:25:05
オリジナル
2906 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!