JavaScriptのsessionStorageを使ってセッションキーに設定した値を別ページで表示する方法 DAD UNION

JavaScriptのsessionStorageを使ってセッションキーに設定した値を別ページで表示する方法をご紹介します。
PHPのサーバサイドプログラムではセッションを使った複数ページを跨いだ値の保持をやりますが、今回はクライアントサイドのブラウザ側でsessionStorageを使ったセッション保持の方法です。セッションキーに値を設定し、セッションキーの値を別ページで表示させます。

Contents

セッションキーに値を設定するページ（index.html）のHTMLとJavaScript記述
セッションキーに値を設定するページ（page2.html）のHTMLとJavaScript記述
【sessionStorage】JavaScriptを使ってセッションキーに設定した値を別ページで表示させるデモページ

セッションキーに値を設定するページ（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>