ウェブ開発において、セッション管理は非常に重要な役割を担っています。特に、ユーザーがサイトをナビゲートする際の快適さや、セキュリティの確保において欠かせません。
この記事では、JavaScriptのsessionStorageを使用して、セッションキーに値を設定し、その値をウェブサイトの異なるページで表示する方法を詳しく解説します。
エンジニアの方はもちろん、ウェブ開発に興味を持ち始めたばかりの方にも理解しやすいように、基礎から応用まで段階を追って説明していきます。
セッションとは？
セッションとは、ウェブサイトの訪問者がブラウザを開いている間継続する一時的な情報の保存領域を指します。これにより、ユーザーがサイト上で行った選択や設定などのデータをページ間で保持することが可能になります。PHPなどのサーバーサイド言語では、セッションを利用してサーバー上でこれらの情報を管理しますが、JavaScriptを使うことでクライアントサイド、つまりブラウザ側でセッション情報を扱うこともできます。
sessionStorageとは？
sessionStorageは、HTML5で導入されたWeb Storage APIの一部で、ブラウザが提供するキーと値のペアでデータをローカルに保存する機能です。sessionStorageに保存されたデータは、ブラウザのタブが閉じられると同時に削除されるため、セッションデータの管理に最適です。これは、例えば、フォーム入力の途中で別のページに移動した際に、入力途中のデータを保持しておきたいというシナリオに役立ちます。
実装方法
セッションキーに値を設定する
まず、セッションキーに値を設定するためには、sessionStorage.setItemメソッドを使用します。
このメソッドは2つの引数を取り、第一引数にはキーの名前を、第二引数にはそのキーに関連付ける値を指定します。
window.sessionStorage.setItem([‘セッションキー’],[‘値’])を使って設定します。
例えば、ページ（index.html）でユーザーのセッションキー”k1″に”session_value”という値を設定する場合、以下のように記述します。
<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）で、先ほど設定したセッションキーの値を表示させるには、sessionStorage.getItemメソッドを使用します。
このメソッドはキー名を引数に取り、そのキーに保存された値を返します。
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を使ったサンプルを体験するには、以下のデモページをご覧ください。
【sessionStorage】JavaScriptを使ってセッションキーに設定した値を別ページで表示させるデモ
まとめ
この記事では、JavaScriptのsessionStorageを使って、セッションキーに値を設定し、異なるページ間でその値を共有する方法について解説しました。このテクニックは、ユーザーがサイト上で行う一時的な操作を記憶しておくのに非常に便利で、フォームデータの保持や、ユーザーの設定選択など、幅広い用途で活用することができます。ぜひこの知識を活用して、より使いやすく、インタラクティブなウェブサイトの開発に役立ててください。
この記事の内容は、エンジニアリングの基礎から応用まで幅広くカバーし、初心者から経験豊富な開発者までが理解しやすいように解説しています。ウェブ開発の世界は常に進化しており、新しい技術や方法が次々と登場しています。今回紹介したsessionStorageもその一例です。技術の進化に伴い、私たちの学び方も変わってきています。この記事が、あなたの学習の一助となり、より良いウェブサイトの開発に繋がることを心から願っています。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
