Webサイトは基本的に「忘れん坊」です。
ブラウザを更新（リロード）したり閉じたりすると、変数の中身はすべてリセットされてしまいます。
でも、Amazonのカートや、Twitterの下書きは、ブラウザを閉じても残っていますよね？
あれを実現する技術の一つが、ブラウザに備わっている倉庫「localStorage（ローカルストレージ）」です。
1. ブラウザの倉庫「localStorage」の使い方
使い方は非常にシンプル。「キー（合言葉）」と「値（中身）」をセットで保存します。
| やりたいこと | 命令 | 書き方 |
|---|---|---|
| 保存する | setItem | localStorage.setItem("キー", "中身"); |
| 取り出す | getItem | const data = localStorage.getItem("キー"); |
| 削除する | removeItem | localStorage.removeItem("キー"); |
⚠️ 最大の注意点：文字しか入らない！
localStorageは、数値や配列をそのまま入れようとしても、無理やり「文字」に変換して保存してしまいます。
// 失敗例
const list = ["掃除", "洗濯"];
localStorage.setItem("todo", list);
// → 保存されるのは "掃除,洗濯" というただの文字...配列として使えなくなる！2. 配列を保存する奥義「JSON変換」
配列やオブジェクトをそのままの形で保存・復元するには、前回のAPI通信でも登場した「JSON」という形式に変換します。
- 保存する時：
JSON.stringify()で、配列を「JSON文字列」に固める。 - 取り出す時：
JSON.parse()で、文字列を「配列」に戻す。
const list = ["掃除", "洗濯"];
// 1. JSON文字列（'["掃除","洗濯"]'）に変換して保存
localStorage.setItem("myTodo", JSON.stringify(list));
// 2. 取り出して、元の配列に戻す
const savedData = localStorage.getItem("myTodo");
const myList = JSON.parse(savedData);
console.log(myList[0]); // "掃除" と取り出せる！3. 卒業制作：消えないTodoリスト
では、これまでの知識（DOM操作、配列、ループ、イベント、localStorage）を総動員して、実用的なアプリを作りましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
body { font-family: sans-serif; padding: 20px; max-width: 500px; margin: 0 auto; }
input { padding: 10px; width: 70%; }
button { padding: 10px; width: 20%; cursor: pointer; }
ul { padding: 0; list-style: none; }
li { background: #f4f4f4; border-bottom: 1px solid #ddd; padding: 10px; }
</style>
</head>
<body>
<h1>消えないTodoリスト</h1>
<input type="text" id="todo-input" placeholder="やることを入力">
<button id="add-btn">追加</button>
<ul id="todo-list"></ul>
<script>
// 1. 要素を取得
const input = document.querySelector("#todo-input");
const btn = document.querySelector("#add-btn");
const list = document.querySelector("#todo-list");
// 2. Todoデータを管理する配列
// ★起動時にlocalStorageからデータを読み込む（なければ空の配列）
let todos = JSON.parse(localStorage.getItem("todos")) || [];
// 3. 画面を更新する関数（配列の中身を全部表示する）
const renderList = () => {
list.innerHTML = ""; // 一旦リストを空にする
for (const todo of todos) {
const li = document.createElement("li");
li.textContent = todo;
list.appendChild(li);
}
};
// 4. データ保存の関数
const saveTodos = () => {
localStorage.setItem("todos", JSON.stringify(todos));
};
// 5. 追加ボタンを押した時
btn.addEventListener("click", () => {
const text = input.value;
if (text === "") return; // 空なら何もしない
todos.push(text); // 配列に追加
saveTodos(); // ★保存！
renderList(); // 画面更新
input.value = ""; // 入力欄を空にする
});
// 6. 最初の画面表示
renderList();
</script>
</body>
</html>解説：コードの流れ
- 起動時：
localStorage.getItemでデータを探します。もし前回保存したデータがあればそれを使い、なければ空の配列[]でスタートします（||は「または」という意味）。 - 追加時：
todos.push()で配列に足した後、すかさずsaveTodos()で保存し直します。 - 表示時： 配列の中身をループしてHTMLを作ります。
試しにいくつかリストに追加した後、ブラウザをリロードしてみてください。
……消えていませんよね？ これが「データ永続化」の魔法です！
JavaScript編完結！次のステップへ
おめでとうございます！これでJavaScriptの基礎と応用はすべて修了です。
Webサイトの見た目を変えるだけでなく、計算し、通信し、データを保存する力まで手に入れました。
さて、ここから先の道は大きく2つに分かれます。
- フロントエンドを極める：
React（リアクト）やVue.jsなどの「フレームワーク」を学ぶ。よりリッチなアプリが作れます。 - バックエンドに進む（おすすめ）：
PHPやデータベースを学ぶ。会員登録機能や掲示板など、本格的なシステムが作れます。
Web制作の全体像を知るためには、次は「PHP（サーバーサイド）」に進むのがおすすめです。
HTML/CSS/JSで作った画面の裏側で、どんなプログラムが動いているのかを覗いてみましょう！
📝 今日のミニテスト
JS編最後のテストです！
Q1. localStorageにデータを保存するメソッドは？
正解：setItem("キー", "値")
取り出すときは getItem です。
Q2. 配列やオブジェクトをlocalStorageに保存するために必要な処理は？
正解：JSON.stringify() で文字列に変換する
そのまま入れると壊れてしまいます。取り出すときは JSON.parse() です。
Q3. localStorageのデータはいつ消える？
正解：ユーザーが手動で消すか、プログラムで消すまで消えない
ブラウザを閉じても、PCを再起動しても残り続けます。（※シークレットモードを除く）