JavaScriptのsessionStorageを使ってセッションキーに設定した値を別ページで表示する方法をご紹介します。
PHPのサーバサイドプログラムではセッションを使った複数ページを跨いだ値の保持をやりますが、今回はクライアントサイドのブラウザ側でsessionStorageを使ったセッション保持の方法です。セッションキーに値を設定し、セッションキーの値を別ページで表示させます。
Contents
セッションキーに値を設定するページ(index.html)のHTMLとJavaScript記述
※window.sessionStorage.setItem([‘セッションキー’],[‘値’])を使って設定します。
<h1>このページでセッションキーに設定した値を別ページで表示させます</h1> <br> このページではセッションキー「k1」に「session_dadunion」をセットしました。<br> 下記のリンクをクリックすると「k1」キーににセットした値を別ページで表示させます。<br> ブラウザのalertダイヤログメッセージで表示されます。<br> <br> <br> <a href="page2.html">「k1」キーににセットした値を別ページで表示>></a> <script type="text/javascript"> //セッションの格納 window.sessionStorage.setItem(['k1'],['session_dadunion']); </script> </body>
セッションキーに値を設定するページ(page2.html)のHTMLとJavaScript記述
※window.sessionStorage.getItem([‘セッションキー名’])を使って設定した値を表示させます。最後にwindow.sessionStorage.clear()でセッションを全てクリアします。
<h1>このページではブラウザのalertダイヤログメッセージで<br>セッションキー「k1」に設定されている値を表示し、<br>その後設定したセッションを全て削除してます。</h1> <br> <br> <a href="index.html"><<セッションキーを設定するページに戻る</a> <script type="text/javascript"> alert(window.sessionStorage.getItem(['k1'])); //セッションの削除 window.sessionStorage.clear(); </script>
【sessionStorage】JavaScriptを使ってセッションキーに設定した値を別ページで表示させるデモページ
【sessionStorage】JavaScriptを使ってセッションキーに設定した値を別ページで表示させるデモ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告