1. 導入：なぜsessionStorageが必要なのか
Webサイトを操作していると、「ページを移動しても特定の情報を保持しておきたい」という場面に遭遇します。例えば、フォームの入力途中で一時的にデータを保存したり、サイト内での現在の状態（タブの選択状況など）を管理したりする場合です。
JavaScriptのsessionStorageを使えば、サーバーにデータを送ることなく、ブラウザ内に安全かつ簡単にデータを一時保存できます。今回は、その中でも最も基本となる「データの保存」を行うsessionStorage.setItemについて解説します。
2. 基礎知識：sessionStorageとは何か
sessionStorageは、Webブラウザに用意されている「Web Storage API」の一つです。以下の特徴があります。
・データはタブごとに保存される：ページを閉じるか、タブを閉じるとデータは自動的に削除されます。
・容量制限がある：通常、数MB程度のデータを保存できます。
・文字列のみ保存可能：保存できるデータは「キー（名前）」と「値（データ）」のペアで、どちらも文字列である必要があります。
3. 実装と解決策
データを保存するには、sessionStorage.setItem(‘キー’, ‘値’)というメソッドを使用します。
仕組みはとてもシンプルで、特定の「名前（キー）」に対して、「中身（値）」を紐付けてブラウザのメモリに記録します。もし同じキーで再度保存を行うと、以前の中身は自動的に新しい値で上書きされます。
4. サンプルプログラム
以下のコードをブラウザのコンソールや、HTMLファイルに貼り付けて動作を確認してみてください。
// 1. データを保存する (setItem)
// 'userName'という名前で、'田中太郎'という値を保存します
sessionStorage.setItem('userName', '田中太郎');
// 2. データを取得する (getItem)
// 保存したデータを取り出して変数に格納します
const name = sessionStorage.getItem('userName');
console.log('保存された名前:', name); // コンソールに「田中太郎」と表示されます
// 3. 応用：オブジェクトを保存したい場合
// sessionStorageは文字列しか扱えないため、JSON.stringifyを使います
const userProfile = { id: 1, theme: 'dark' };
sessionStorage.setItem('profile', JSON.stringify(userProfile));
// 取り出すときは JSON.parse を使って元の形に戻します
const savedProfile = JSON.parse(sessionStorage.getItem('profile'));
console.log('保存された設定:', savedProfile.theme); // 'dark' と表示されます
5. 応用と注意点
現場で活用する上で、以下の点に注意してください。
・セキュリティに注意：sessionStorageはブラウザのデベロッパーツールから誰でも簡単に見ることができます。個人情報やパスワードなど、機密性の高いデータを保存するのは絶対に避けてください。
・型変換を忘れずに：前述のサンプルにある通り、数値やオブジェクトをそのまま保存しようとすると文字列に変換されてしまいます。複雑なデータを扱う際は、JSON.stringify()で変換してから保存し、読み込み時にJSON.parse()で戻すのが定石です。
・localStorageとの違い：似たものにlocalStorageがありますが、こちらはブラウザを閉じてもデータが消えません。用途に合わせて使い分けましょう。
まずは簡単な文字列の保存から試して、ブラウザ内の「アプリケーション」タブ（デベロッパーツール）でデータが正しく保存されているか確認してみてください。