JavaScriptでSessionStorageを活用して簡単データ管理
SessionStorage と Cookie の違い
sessionStorage は JavaScript の Web Storage API
の一部で、ページをリロードしたり閉じたりするまでデータを保存できます。
sessionStorage と cookie
はどちらもデータをブラウザに保存するための仕組みですが、それぞれ特徴が異なります。
| 特徴 | sessionStorage | cookie |
|---|---|---|
| 有効期限 | タブやウィンドウを閉じるまで | 任意の有効期限を設定可能 |
| 容量 | 約5MB | 1つあたり約4KB（制限あり） |
| サーバーとの通信 | サーバーには送信されない | 自動的に送信される |
| スコープ | タブ・ウィンドウ単位 | 同一ドメイン内で共有可能 |
| セキュリティ | JavaScript で操作可能 | セキュリティオプション豊富 |
データの有効期限
sessionStorage: タブやウィンドウを閉じるとデータが削除されます。cookie: 任意の有効期限を設定可能（デフォルトではセッション終了時に削除されます）。
データ容量
sessionStorage: 通常 5MB 程度（ブラウザに依存）。cookie: 1つのクッキーあたり約4KB 程度。ドメインごとの最大クッキー数にも制限があります。
サーバーとの通信
sessionStorage: サーバーには送信されません。クライアントサイドのみで使用します。cookie: HTTPリクエスト時に自動送信されます。セッション管理や認証に適しています。
スコープ（アクセス範囲）
sessionStorage: 同一タブまたはウィンドウ内でのみ利用可能。別のタブやウィンドウでは共有されません。cookie: 同一ドメイン内であれば、全タブ・ウィンドウで共有可能。サブドメイン間での共有も可能です。
セキュリティ
sessionStorage: JavaScript でのみ操作可能（HttpOnlyのようなオプションはありません）。cookie:HttpOnly、Secure、SameSiteなどのオプションでセキュリティを強化できます。
主な用途
sessionStorage: 一時的なデータ保存（例: 入力フォームの一時保存、画面遷移間のデータ共有）。cookie: セッション管理や認証情報の保存に適しています。
基本的な使い方
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sessionStorage 使用例</title>
</head>
<body>
<input type="text" id="inputData" placeholder="入力して保存">
<button id="saveBtn">保存</button>
<button id="loadBtn">読み込み</button>
<button id="clearBtn">削除</button>
<div id="output"></div>
<script>
document.getElementById('saveBtn').addEventListener('click', function () {
const data = document.getElementById('inputData').value;
if (data) {
sessionStorage.setItem('myData', data);
alert('データを保存しました');
} else {
alert('入力してください');
}
});
document.getElementById('loadBtn').addEventListener('click', function () {
const savedData = sessionStorage.getItem('myData');
if (savedData) {
document.getElementById('output').textContent = `保存されたデータ: ${savedData}`;
} else {
document.getElementById('output').textContent = 'データがありません';
}
});
document.getElementById('clearBtn').addEventListener('click', function () {
sessionStorage.removeItem('myData');
alert('データを削除しました');
document.getElementById('output').textContent = '';
});
</script>
</body>
</html>コードのポイント
- 保存 (setItem):
sessionStorage.setItem(key, value)を使用してデータを保存します。 - 読み込み (getItem):
sessionStorage.getItem(key)でデータを取得します。 - 削除 (removeItem):
sessionStorage.removeItem(key)で指定したデータを削除します。 - すべてクリアする:
sessionStorage.clear()を使用してすべてのデータを削除できます。
複数ページ間での利用
- ページをリロードしても消えない:
同じタブでページをリロードした場合、
sessionStorageに保存されたデータはそのまま残ります。 - ページ遷移しても保持される: 同じタブ内でリンクやリダイレクトによって別のページへ遷移した場合も、データは保持されます。
- タブを閉じるとデータは削除される:
タブを閉じた時点で、
sessionStorageのデータは自動的に消去されます。