localStorageとsessionStorageの違いをブラウザAPIで学ぶ

localStorageとsessionStorageは、ブラウザが提供するWeb Storage APIの一部であり、データの永続的保存と一時的保存を実現する手段です。それぞれの特徴や利用例を理解することで、適切な場面で活用できます。

Web Storage APIの概要

Web Storage APIは、ブラウザにデータを保存するためのキー/バリュー型ストレージを提供します。Cookieに比べてシンプルで効率的です。

localStorageの特徴

localStorageは、ブラウザに永続的にデータを保存します。ユーザーが明示的にデータを削除しない限り、保存されたデータは保持されます。

localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // 'value'
localStorage.removeItem('key');

sessionStorageの特徴

sessionStorageは、現在のセッションが終了するとデータが削除されます。同一タブ内でのみデータが共有され、タブを閉じると消失します。

sessionStorage.setItem('sessionKey', 'sessionValue');
console.log(sessionStorage.getItem('sessionKey')); // 'sessionValue'
sessionStorage.clear();

localStorageとsessionStorageの違い

• データの寿命: localStorageは永続的、sessionStorageはセッション終了まで。
• タブ間のデータ共有: localStorageは可能、sessionStorageは不可能。
• 使用方法はほぼ同一。

データの容量制限

localStorageとsessionStorageは、一般的に5MBのデータを保存可能です。この容量を超えるとエラーが発生します。

try {
  const largeData = 'a'.repeat(5 * 1024 * 1024);
  localStorage.setItem('largeKey', largeData);
} catch (e) {
  console.error('Storage limit exceeded');
}

データ形式

保存されるデータは文字列形式です。オブジェクトや配列を保存する場合、JSON.stringifyを使用します。

const user = { name: 'Alice', age: 25 };
localStorage.setItem('user', JSON.stringify(user));
const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser.name); // 'Alice'

セキュリティの考慮事項

localStorageとsessionStorageはクライアントサイドに保存されるため、機密情報を保存しないでください。また、XSS攻撃によりデータが漏洩する可能性があります。

ストレージ操作のイベント

localStorageに変更が加えられると、storageイベントが発火します。sessionStorageではこのイベントは発生しません。

window.addEventListener('storage', event => {
  console.log(`Key: ${event.key}, New Value: ${event.newValue}`);
});
localStorage.setItem('test', 'value');

ブラウザ間の互換性

ほとんどの最新ブラウザでlocalStorageとsessionStorageがサポートされています。ただし、Internet Explorerの古いバージョンでは制限があります。

Cookieとの比較

Cookieは主にサーバー間通信で使用されますが、localStorageとsessionStorageはクライアントサイド専用です。また、Cookieのデータサイズは4KBに制限されます。

ストレージのクリア

ストレージ全体を削除するにはclearメソッドを使用します。

localStorage.clear();
sessionStorage.clear();

実用例: ユーザー設定の保存

ユーザーのテーマ設定をlocalStorageに保存し、ページを再読み込みしても反映させる例です。

document.getElementById('theme-toggle').addEventListener('click', () => {
  const currentTheme = localStorage.getItem('theme') === 'dark' ? 'light' : 'dark';
  document.body.className = currentTheme;
  localStorage.setItem('theme', currentTheme);
});

まとめ

localStorageとsessionStorageを使い分けることで、ブラウザ上で効率的にデータを管理できます。それぞれの特徴を理解し、適切なユースケースで活用しましょう。