JavaScriptでSessionStorageを活用して簡単データ管理
SessionStorage と Cookie の違い
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: セッション管理や認証情報の保存に適しています。
基本的な使い方
html
<!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 のデータは自動的に消去されます。