2026年4月16日
JavaScript localStorage とは？
ウェブページを閉じてもデータを保存しておきたいとき、localStorage（ローカルストレージ）を使います。
localStorageはブラウザにデータを保存する仕組みで、ページを閉じても・ブラウザを再起動しても、データが残ります。ユーザーの設定・進捗・メモなどの保存に使えます。
基本的な操作
// データを保存
localStorage.setItem('name', '田中');
localStorage.setItem('score', '100');
// データを取得
const name = localStorage.getItem('name');
const score = localStorage.getItem('score');
console.log(name); // 田中
console.log(score); // '100'（文字列として取得される）
// データを削除
localStorage.removeItem('name');
// すべて削除
localStorage.clear();⚠️ 注意： localStorageは文字列しか保存できません。数値も文字列として保存されます。
🔗 あわせてfetch入門もチェックしてみましょう。
オブジェクトを保存する（JSON）
オブジェクトや配列を保存するには、JSON.stringify() で文字列に変換してから保存し、取得時に JSON.parse() で元に戻します。
const user = { name: '田中', score: 100 };
// 保存（オブジェクト→文字列）
localStorage.setItem('user', JSON.stringify(user));
// 取得（文字列→オブジェクト）
const saved = JSON.parse(localStorage.getItem('user'));
console.log(saved.name); // 田中
console.log(saved.score); // 100📖 詳しくはエラー辞典で解説しています。
sessionStorageとの違い
| 項目 | localStorage | sessionStorage |
|---|---|---|
| 保存期間 | 削除するまで永続 | タブを閉じると削除 |
| 用途 | 設定・進捗の保存 | 一時的なデータ |
👉 if文入門も参考にしてください。
localStorageの活用アイデア
localStorageを使うと、ブラウザを閉じてもデータが残ります。初心者でも作れる活用アイデアを紹介します。
アイデア1：ダークモードの設定を保存する
ユーザーがダークモードを選んだら、その設定をlocalStorageに保存します。次にページを開いたとき、保存した設定を読み込んでダークモードを適用します。毎回切り替える手間がなくなります。
アイデア2：ToDoリストのデータを保存する
タスクの一覧をlocalStorageに保存すれば、ブラウザを閉じてもリストが消えません。タスクを追加・削除するたびに、localStorageを更新します。
アイデア3：ゲームのハイスコアを記録する
ゲームのスコアをlocalStorageに保存すれば、ハイスコアを記録できます。新しいスコアが前のハイスコアを超えたときだけ更新する、という処理を書きます。
アイデア4：フォームの入力内容を一時保存する
長いフォームを入力中に、間違えてページを閉じてしまうことがあります。入力内容をlocalStorageに保存しておけば、ページを開き直したときに復元できます。
localStorageの注意点
localStorageを使うときに知っておくべき注意点があります。
注意点1：文字列しか保存できない
localStorageに保存できるのは文字列だけです。数値やオブジェクト、配列を保存したいときは、JSON.stringify()で文字列に変換してから保存します。読み込むときはJSON.parse()で元の形に戻します。
注意点2：容量に制限がある
localStorageの容量は通常5MB程度です。テキストデータなら十分ですが、大きな画像データなどは保存できません。
注意点3：機密情報は保存しない
パスワードやクレジットカード番号などの機密情報は、localStorageに保存してはいけません。localStorageの中身は開発者ツールで誰でも見られるからです。
注意点4：ブラウザごとに別々
localStorageはブラウザごとに独立しています。Chromeで保存したデータは、Safariでは読めません。また、同じブラウザでもシークレットモードでは別の領域になります。
注意点5：ユーザーが削除できる
ブラウザの設定からlocalStorageのデータを削除できます。大切なデータはサーバーに保存するのが安全です。localStorageはあくまで「あると便利」な補助的な保存場所と考えましょう。上手に活用して、使いやすいアプリを作ってください。
まとめ
- ✅ localStorage：ブラウザにデータを永続保存する
- ✅
setItem(key, value)：保存、getItem(key)：取得 - ✅ 文字列しか保存できない。オブジェクトは
JSON.stringify()で変換 - ✅ sessionStorage：タブを閉じると削除される一時保存
JavaScriptの基礎はJavaScript入門で復習できます。
あわせて読みたい記事
- JavaScriptとは？初心者向け解説 — JS基礎に戻る
- JavaScriptオブジェクト入門 — オブジェクトのJSON変換
- JavaScript文字列操作入門 — 文字列操作の基本
- JavaScript DOM操作入門 — DOM操作と組み合わせ
- JavaScriptイベント入門 — イベントで保存トリガー
- JavaScript fetch入門 — APIデータのキャッシュ