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