2026年5月9日
導入
JavaScriptでブラウザにデータを保存できることを知っていますか？
通常、Webページを閉じるとデータは消えます。でもlocalStorage（ローカルストレージ）を使えば、ページを閉じても、ブラウザを再起動しても、データが残ります。
たとえば、こんなことができます。
- メモの内容を保存して、次に開いたとき復元する
- ダークモードの設定を覚えておく
- ゲームのスコアを保存する
この記事では、localStorageの基本的な使い方を解説します。実践コードとして「メモ帳アプリ」と「テーマ切り替え」を作ります。
JavaScript入門の基礎知識があれば、すぐに理解できます。
localStorageの基本：4つのメソッド
localStorageの操作は、たった4つのメソッド（命令）で行います。
setItem：データを保存する
// localStorage.setItem("キー", "値")
localStorage.setItem("name", "太郎");「キー」は名前、「値」は保存したいデータです。引き出しにラベルを貼って、中身を入れるイメージです。
getItem：データを読み込む
// localStorage.getItem("キー")
const name = localStorage.getItem("name");
console.log(name); // "太郎"キーを指定して、保存したデータを取り出します。存在しないキーを指定するとnullが返ります。
removeItem：データを1つ削除する
// localStorage.removeItem("キー")
localStorage.removeItem("name");clear：すべてのデータを削除する
// localStorage.clear()
localStorage.clear();実践1：メモ帳アプリ
テキストエリアに書いた内容を自動保存するメモ帳を作ります。ページを閉じて再度開いても、メモが残ります。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>メモ帳</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
textarea { width: 100%; height: 300px; font-size: 16px; padding: 15px; border: 2px solid #ddd; border-radius: 8px; resize: vertical; }
.status { margin-top: 10px; font-size: 14px; color: #888; }
</style>
</head>
<body>
<h1>📝 メモ帳</h1>
<textarea id="memo" placeholder="ここにメモを書いてください..."></textarea>
<p class="status" id="status"></p>
<script src="memo.js"></script>
</body>
</html>JavaScript（memo.js）
// HTML要素を取得
const memo = document.getElementById("memo");
const status = document.getElementById("status");
// ページを開いたとき、保存済みのメモを読み込む
const savedMemo = localStorage.getItem("memo-content");
if (savedMemo !== null) {
memo.value = savedMemo;
status.textContent = "保存済みのメモを読み込みました";
}
// テキストが変更されるたびに自動保存
memo.addEventListener("input", function() {
localStorage.setItem("memo-content", memo.value);
status.textContent = "自動保存しました ✓";
});コード解説
- ページを開いたとき、
getItemで保存済みのメモを読み込みます nullでなければ（保存データがあれば）テキストエリアに表示しますinputイベントで、文字が入力されるたびにsetItemで保存します
イベント処理の基本でaddEventListenerの使い方を復習できます。DOM操作の基本でgetElementByIdの詳細を学べます。
実践2：テーマ切り替え（ダークモード）
ダークモードとライトモードを切り替えて、設定をlocalStorageに保存します。次にページを開いたとき、前回の設定が反映されます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>テーマ切り替え</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 60px 20px; transition: background-color 0.3s, color 0.3s; }
body.light { background-color: #ffffff; color: #333333; }
body.dark { background-color: #1a1a2e; color: #ffffff; }
button { padding: 12px 24px; font-size: 16px; border: none; border-radius: 8px; cursor: pointer; margin-top: 20px; }
body.light button { background-color: #333; color: #fff; }
body.dark button { background-color: #fff; color: #333; }
</style>
</head>
<body class="light">
<h1>🌓 テーマ切り替え</h1>
<p>ボタンを押すとテーマが変わります。設定は保存されます。</p>
<button id="toggle-btn">ダークモードにする</button>
<script src="theme.js"></script>
</body>
</html>JavaScript（theme.js）
const body = document.body;
const toggleBtn = document.getElementById("toggle-btn");
// 保存済みのテーマを読み込む
const savedTheme = localStorage.getItem("theme");
if (savedTheme === "dark") {
body.className = "dark";
toggleBtn.textContent = "ライトモードにする";
}
// ボタンクリックでテーマを切り替え
toggleBtn.addEventListener("click", function() {
if (body.className === "light") {
body.className = "dark";
toggleBtn.textContent = "ライトモードにする";
localStorage.setItem("theme", "dark");
} else {
body.className = "light";
toggleBtn.textContent = "ダークモードにする";
localStorage.setItem("theme", "light");
}
});コード解説
- ページ読み込み時に
getItem("theme")で保存済みの設定を確認 "dark"なら、bodyのクラスをdarkに変更- ボタンクリックでクラスを切り替え、同時に
setItemで設定を保存
オブジェクトを保存する：JSON.stringify / JSON.parse
localStorageは文字列しか保存できません。数値やオブジェクト（複数のデータをまとめたもの）を保存するには、変換が必要です。
解決：JSON.stringifyで変換して保存
JSON（ジェイソン）とは、データを文字列で表す形式です。
// 保存するとき：オブジェクト → 文字列
const scores = [85, 92, 78];
localStorage.setItem("scores", JSON.stringify(scores));
// 保存される値: "[85,92,78]"読み込み：JSON.parseで元に戻す
// 読み込むとき：文字列 → オブジェクト
const saved = localStorage.getItem("scores");
const scores = JSON.parse(saved);
// scores = [85, 92, 78]（配列として使える）オブジェクトの例
// ユーザー設定を保存
const settings = {
theme: "dark",
fontSize: 16,
notifications: true
};
localStorage.setItem("settings", JSON.stringify(settings));
// 読み込み
const saved = JSON.parse(localStorage.getItem("settings"));
console.log(saved.theme); // "dark"JavaScriptのオブジェクトで、オブジェクトの基本を学べます。
注意点：知っておくべき3つのこと
注意1：容量制限がある
localStorageの容量は、ブラウザごとに約5MBです。テキストデータなら十分ですが、画像や動画は保存できません。
注意2：文字列しか保存できない
数値を保存しても、読み込むと文字列になります。
localStorage.setItem("count", 10);
const count = localStorage.getItem("count");
console.log(typeof count); // "string"（文字列！）
console.log(count + 1); // "101"（文字列の結合になる）
// 正しくは数値に変換する
const num = Number(localStorage.getItem("count"));
console.log(num + 1); // 11注意3：機密情報は保存しない
localStorageはブラウザの開発者ツールから誰でも見られます。パスワードや個人情報は絶対に保存しないでください。
localStorageの活用アイデア
基本を覚えたら、いろいろなアプリに応用できます。
- ToDoリストの項目を保存する
- ゲームのハイスコアを記録する
- フォームの入力途中の内容を保存する
- ポモドーロタイマーのセッション回数を保存する
まとめ
- ✅ setItem(key, value)で保存、getItem(key)で読み込み
- ✅ removeItem(key)で1つ削除、clear()で全削除
- ✅ ページを閉じてもデータが残る
- ✅ オブジェクトはJSON.stringifyで変換して保存
- ✅ 容量は約5MB、機密情報は保存しない
localStorageを使えば、アプリの「使いやすさ」が格段に上がります。ぜひ自分のアプリに組み込んでみてください。
🎯 次のステップ
localStorageを使いこなして、もっと便利なアプリを作ろう！
- JavaScript入門 — JavaScriptの基礎を復習
- JavaScriptのオブジェクト — オブジェクトとJSONを詳しく学ぶ
- DOM操作の基本 — HTMLをJavaScriptで操作する方法
- イベント処理の基本 — ユーザー操作への反応