1. 導入：なぜlocalStorageが重要なのか
Webサイトを作っていると、「ユーザーが入力した情報をページを閉じても覚えておいてほしい」「設定したダークモードの状態を維持したい」といった要望が出てきます。通常、ブラウザはページをリロードしたり閉じたりするとデータを忘れてしまいます。この課題を解決し、ブラウザ内にデータを手軽に保存できる仕組みが「localStorage」です。データベースを構築しなくても、ブラウザだけで完結する便利なストレージ機能を学びましょう。
2. 基礎知識：localStorageとは？
localStorageは、ブラウザにデータを「キー（名前）」と「値（データ）」のペアで保存する機能です。
特徴は以下の3点です。
・有効期限がない：ブラウザを閉じてもデータが消えません。
・容量が大きい：約5MB程度のデータを保存可能です。
・文字列のみ：データは基本的に「文字列」として保存されます。数値やオブジェクトを保存する場合は変換が必要です。
3. 実装/解決策：データの操作方法
localStorageを操作するには、主に以下の4つのメソッドを使います。
・setItem(key, value)：データを保存する
・getItem(key)：データを取得する
・removeItem(key)：特定のデータを削除する
・clear()：すべてのデータを削除する
4. サンプルプログラム
以下のコードをブラウザのコンソールに貼り付けるか、HTMLファイルに記述して動作を確認してみてください。
// 1. データを保存する
// 「user_name」というキーで「田中太郎」を保存
localStorage.setItem('user_name', '田中太郎');
// 2. データを取得する
const name = localStorage.getItem('user_name');
console.log('保存された名前:', name); // コンソールに「田中太郎」と表示されます
// 3. 数値やオブジェクトを保存する場合
// JSON.stringifyを使って文字列に変換して保存します
const settings = { theme: 'dark', fontSize: 16 };
localStorage.setItem('user_settings', JSON.stringify(settings));
// 4. データを取り出して元の形式に戻す
const savedSettings = JSON.parse(localStorage.getItem('user_settings'));
console.log('設定のテーマ:', savedSettings.theme); // 「dark」と表示されます
// 5. データの削除
localStorage.removeItem('user_name'); // 特定のキーを削除
// localStorage.clear(); // すべてのデータを削除したい場合はこれを使う
5. 応用・注意点
現場で使う際に注意すべきポイントが2つあります。
セキュリティの注意点：
localStorageにパスワードや個人情報などの「機密性の高い情報」を保存してはいけません。localStorageは、同じドメイン内のJavaScriptから自由に読み取れてしまうため、悪意のあるスクリプト（XSS攻撃など）によってデータを盗まれるリスクがあります。
JSON変換の忘れ：
初心者が最も陥りやすいミスは、オブジェクトをそのままlocalStorageに入れようとすることです。そのまま入れると「[object Object]」という文字列になってしまい、元のデータが取り出せなくなります。必ず「JSON.stringify()」で変換して保存し、「JSON.parse()」で戻すというセットを忘れないようにしましょう。