1. はじめに:なぜローカルストレージ?
最近のウェブアプリでは「状態を一時的に保存したい」「フォームの入力内容を保持したい」「再読み込みしてもデータを残したい」といったニーズが高まっています。
クラウドやデータベースに保存する方法もありますが、実は ローカルストレージ(LocalStorage) を使えば、軽量かつ素早く実装可能です。
今回は、次のようなミニアプリを一緒に作りながら、ローカルストレージの基本〜実践的な使い方までを解説します。
2. ローカルストレージとは?
🔍 定義と特徴
- Web Storage API の一部
- キーと値(どちらも文字列)でデータを保存
- 永続的にブラウザに保存(明示的に消さない限り残る)
- 容量はブラウザによって異なるが、概ね 5MB 程度
✅ どんなときに使うのか?
ケース | 使用例 |
---|---|
ユーザー設定 | テーマの明暗、言語、レイアウト |
入力補助 | フォームの途中保存、下書き保存 |
軽量な状態管理 | トグルのON/OFF、チェックボックスの状態保持 |
3. ハンズオン:ToDoリスト保存機能の実装
今回は「ローカルストレージで保存するToDoリスト」を作ります。
🧰 使用技術スタック
- HTML/CSS/JavaScript(フレームワーク不使用)
- ブラウザ:Chrome, Firefox など
📄 HTML(基本構造)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ToDo with LocalStorage</title>
</head>
<body>
<h1>My ToDo List</h1>
<input type="text" id="taskInput" placeholder="新しいタスクを追加" />
<button onclick="addTask()">追加</button>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>
🧠 JavaScript(保存機能の実装)
let tasks = [];
window.onload = () => {
const saved = localStorage.getItem('todo-tasks');
if (saved) {
tasks = JSON.parse(saved);
renderTasks();
}
};
function addTask() {
const input = document.getElementById('taskInput');
const task = input.value.trim();
if (!task) return;
tasks.push(task);
input.value = '';
saveTasks();
renderTasks();
}
function saveTasks() {
localStorage.setItem('todo-tasks', JSON.stringify(tasks));
}
function renderTasks() {
const list = document.getElementById('taskList');
list.innerHTML = '';
tasks.forEach((t, i) => {
const li = document.createElement('li');
li.textContent = t;
li.onclick = () => removeTask(i);
list.appendChild(li);
});
}
function removeTask(index) {
tasks.splice(index, 1);
saveTasks();
renderTasks();
}
✅ 完成!タスクを追加 → ページをリロード → ちゃんと保存されている!
4. 現場で役立つTips&よくある失敗
💡 Tips
-
JSON.stringify()
/JSON.parse()
を忘れずに(配列やオブジェクトは文字列化が必要) - キーの命名には名前空間を使う(例:
myapp.todo
) - ブラウザ間で共有できないので、ユーザー単位での使い分けに注意
❌ よくあるミス
ミス内容 | 解決策 |
---|---|
保存できていない |
localStorage.setItem() の直後に console.log() で確認 |
値が文字列でしか保存されていない |
JSON.stringify() / parse() を忘れていないかチェック |
スペースや空白タスクが追加される |
.trim() を追加して防ぐ |
5. 応用編:チェック付きToDoや期限付き削除
✅ チェック状態の保存
tasks = [{ text: "Buy milk", done: false }]; // 拡張版
// チェックボックス追加して、状態を保存
⏱ 自動期限切れ(保存から24時間後に削除)
const now = Date.now();
localStorage.setItem('task-data', JSON.stringify({ savedAt: now, tasks }));
// 起動時に有効期限チェック
const saved = JSON.parse(localStorage.getItem('task-data'));
if (Date.now() - saved.savedAt > 86400000) { // 24h
localStorage.removeItem('task-data');
}
6. まとめ:ローカルストレージの可能性と限界
✅ メリット
- 簡単で即時反映
- サーバーレスで動く
- 高速アクセス(ネットワーク不要)
⚠ デメリット
- 容量制限あり(5MB前後)
- セキュリティ上の制限(XSSに注意)
- マルチユーザーや複数デバイス間での共有は不可
🔭 今後の展望
ローカルストレージは単体でも十分便利ですが、以下のような技術と組み合わせることで、さらにパワーアップできます。
- IndexedDB:構造化された大規模データを扱いたいとき
- ServiceWorker+Cache API:オフラインファーストなアプリへ
- クラウド同期(Firebase等):ログイン時に同期
🏁 最後に
このミニプロジェクトを通じて、「保存機能をちょっとつけたい」ときに、すぐ使える便利な道具としてローカルストレージの活用方法が理解できたかと思います。
「明日すぐにでも実務で使える」ような技術に落とし込めることを目指して、次回も実践的なミニプロジェクトを紹介します。
次回の「ミニプロジェクト10連発」では、「GitHubに作品をアップロード」を予定しています。お楽しみに!