導入: なぜlocalStorageが必要なのか
Web開発をしていると、「ブラウザを閉じてもユーザーの設定や入力内容を保持しておきたい」という場面に遭遇します。例えば、ダークモードの切り替え状態や、フォームの途中経過などがそれにあたります。JavaScriptの変数だけではページをリロードするとデータが消えてしまいますが、localStorage.setItemを活用することで、ブラウザ内にデータを永続的に保存し、ユーザー体験を大きく向上させることが可能です。
基礎知識: localStorageとは？
localStorageは、ブラウザが提供するWeb Storage APIの一つです。
・永続性: ブラウザを閉じてもデータが消えません（ユーザーが手動でキャッシュを消さない限り）。
・容量: 通常5MB程度のデータを保存可能です。
・制約: 文字列（String）しか保存できないため、オブジェクトや配列を保存する場合は「JSON文字列」に変換する必要があります。
実装/解決策: 基本の使い方
localStorageの基本操作は非常にシンプルです。「キー」と「値」のペアで保存します。
1. 保存: localStorage.setItem(‘キー名’, ‘値’)
2. 取得: localStorage.getItem(‘キー名’)
3. 削除: localStorage.removeItem(‘キー名’)
サンプルプログラム: JSONデータの保存と読み込み
オブジェクトを保存する際は、JSON.stringify()で文字列化し、取得時にJSON.parse()で元の型に戻すのが定石です。
// 保存するデータ
const userSettings = {
theme: 'dark',
notifications: true
};
// 1. オブジェクトをJSON文字列に変換して保存
localStorage.setItem('user_prefs', JSON.stringify(userSettings));
console.log('保存が完了しました');
// 2. データを取得
const savedData = localStorage.getItem('user_prefs');
// 3. 取得した文字列をJavaScriptオブジェクトに復元
if (savedData) {
const parsedData = JSON.parse(savedData);
console.log('現在のテーマ設定:', parsedData.theme); // 出力: dark
} else {
console.log('保存されたデータはありません');
}
応用・注意点: 現場で役立つポイント
1. 機密情報の扱いに注意: localStorageはJavaScriptから簡単にアクセスできるため、トークンやパスワードなど、セキュリティ上重要な情報を保存するのは避けてください（XSS攻撃の標的になりやすいため）。
2. 容量オーバーのハンドリング: 容量制限を超えるとエラー（QuotaExceededError）が発生します。重要なデータを保存する際は、try-catch文で囲むなどのエラーハンドリングを行うのがプロの現場での実装です。
3. 文字列変換の徹底: 数値や真偽値をそのまま保存しようとすると文字列に変換されてしまいます。取得時には型が変わっていないか、意図した型になっているか注意深く確認しましょう。
これらの基本を押さえるだけで、アプリケーションの利便性は格段に上がります。ぜひ今日の実装から活用してみてください。