はじめてのJavaScript #32｜LocalStorage を復習しよう ── 保存・取得・削除の基本

DOI@日々学びの本質を考え続ける探求者

2026年5月19日 21:14

今回のゴール

LocalStorage の基本操作を復習して、データを自在に保存・取得・削除できるようになる。

第7章！LocalStorage編！(^^)/

Web API編ではインターネットからリアルなデータを取得する方法を学びました。ここからの第7章はLocalStorage編です。

#21のハイスコア機能でLocalStorageにさわりましたが、今回はあらためてしっかり基礎から整理します。LocalStorageを使いこなせると「ページを閉じてもデータが残るアプリ」が作れるようになります。

LocalStorage をおさらいしよう

LocalStorageはブラウザに搭載されたデータの保存場所です。

変数　　　　── ページを閉じると消える
Cookie　　　── 有効期限あり・サーバーとやりとりする
LocalStorage── ページを閉じても残る・ブラウザだけで完結

今回はLocalStorageに絞って、4つの基本操作を丁寧に確認します。

基本操作① 保存する ── setItem()

localStorage.setItem("キー", "値");

localStorage.setItem("username", "田中");
localStorage.setItem("score", "100");

キーは値を取り出すときの名前です。辞書の見出し語のようなイメージです。値は必ず文字列として保存されます。

基本操作② 取得する ── getItem()

const value = localStorage.getItem("キー");

const name = localStorage.getItem("username");
console.log(name); // 田中

存在しないキーを指定すると null が返ります。

const nothing = localStorage.getItem("存在しないキー");
console.log(nothing); // null

基本操作③ 削除する ── removeItem()

localStorage.removeItem("キー");

localStorage.removeItem("username");
console.log(localStorage.getItem("username")); // null

基本操作④ 全削除する ── clear()

localStorage.clear(); // すべてのデータを削除

数値・配列・オブジェクトを保存する

LocalStorageは文字列しか保存できません。数値・配列・オブジェクトを保存するときは JSON.stringify() と JSON.parse() を組み合わせます。

// 数値の保存と取得
localStorage.setItem("score", String(100));
const score = Number(localStorage.getItem("score"));
console.log(score + 1); // 101

// 配列の保存と取得
const fruits = ["りんご", "バナナ", "みかん"];
localStorage.setItem("fruits", JSON.stringify(fruits));
const saved = JSON.parse(localStorage.getItem("fruits"));
console.log(saved[0]); // りんご

// オブジェクトの保存と取得
const user = { name: "田中", age: 25 };
localStorage.setItem("user", JSON.stringify(user));
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // 田中

null チェックを忘れずに

初回アクセス時などデータがまだ保存されていない場合、getItem() は null を返します。JSON.parse(null) はエラーにならず null を返しますが、その後の処理でエラーになることがあるので、必ずチェックを入れましょう。

const savedFruits = localStorage.getItem("fruits");
const fruits = savedFruits ? JSON.parse(savedFruits) : [];
// データがあればパース、なければ空配列をデフォルトにする

実際に書いてみよう

LocalStorageの4つの操作をすべて体験できるツールを作ります。

index.html

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>LocalStorage 練習</title>
  </head>
  <body>
    <h1>LocalStorage 練習ツール</h1>

    <h2>① 保存する</h2>
    <input id="keyInput"   type="text" placeholder="キー">
    <input id="valueInput" type="text" placeholder="値">
    <button id="btnSave">保存</button>

    <h2>② 取得する</h2>
    <input id="getKeyInput" type="text" placeholder="キー">
    <button id="btnGet">取得</button>
    <p id="getResult"></p>

    <h2>③ 削除する</h2>
    <input id="removeKeyInput" type="text" placeholder="キー">
    <button id="btnRemove">削除</button>

    <h2>④ 全削除する</h2>
    <button id="btnClear">すべて削除</button>

    <h2>現在の保存データ一覧</h2>
    <button id="btnList">一覧を更新</button>
    <ul id="dataList"></ul>

    <script src="script.js"></script>
  </body>
</html>

script.js

const keyInput       = document.getElementById("keyInput");
const valueInput     = document.getElementById("valueInput");
const btnSave        = document.getElementById("btnSave");
const getKeyInput    = document.getElementById("getKeyInput");
const btnGet         = document.getElementById("btnGet");
const getResult      = document.getElementById("getResult");
const removeKeyInput = document.getElementById("removeKeyInput");
const btnRemove      = document.getElementById("btnRemove");
const btnClear       = document.getElementById("btnClear");
const btnList        = document.getElementById("btnList");
const dataList       = document.getElementById("dataList");

// 保存データの一覧を表示する関数
function showList() {
  dataList.innerHTML = "";

  if (localStorage.length === 0) {
    const li = document.createElement("li");
    li.textContent = "（保存データなし）";
    dataList.appendChild(li);
    return;
  }

  for (let i = 0; i < localStorage.length; i++) {
    const key   = localStorage.key(i);
    const value = localStorage.getItem(key);
    const li    = document.createElement("li");
    li.textContent = key + "：" + value;
    dataList.appendChild(li);
  }
}

// ① 保存する
btnSave.addEventListener("click", function() {
  const key   = keyInput.value.trim();
  const value = valueInput.value.trim();

  if (!key || !value) {
    alert("キーと値の両方を入力してください。");
    return;
  }

  localStorage.setItem(key, value);
  keyInput.value   = "";
  valueInput.value = "";
  showList();
});

// ② 取得する
btnGet.addEventListener("click", function() {
  const key   = getKeyInput.value.trim();
  const value = localStorage.getItem(key);

  if (value === null) {
    getResult.textContent = "「" + key + "」は見つかりませんでした。";
    getResult.style.color = "red";
  } else {
    getResult.textContent = "取得結果：" + value;
    getResult.style.color = "green";
  }
});

// ③ 削除する
btnRemove.addEventListener("click", function() {
  const key = removeKeyInput.value.trim();
  if (!key) return;
  localStorage.removeItem(key);
  removeKeyInput.value = "";
  showList();
});

// ④ 全削除する
btnClear.addEventListener("click", function() {
  if (!confirm("すべてのデータを削除しますか？")) return;
  localStorage.clear();
  getResult.textContent = "";
  showList();
});

// 一覧を更新する
btnList.addEventListener("click", function() {
  showList();
});

// 初期表示
showList();

コードのポイント解説

localStorage.length と localStorage.key()

保存されているデータの件数は localStorage.length で取得できます。localStorage.key(i) でi番目のキー名を取得できるので、forループと組み合わせて全データを一覧表示しています。

for (let i = 0; i < localStorage.length; i++) {
  const key = localStorage.key(i);
  const value = localStorage.getItem(key);
}

confirm() で削除前に確認する

if (!confirm("すべてのデータを削除しますか？")) return;

confirm() はOK・キャンセルのダイアログを表示してtrueかfalseを返します。全削除のような取り消しできない操作の前に確認を入れるのはアプリの基本マナーです。

まとめ

setItem() で保存、getItem() で取得、removeItem() で削除、clear() で全削除
数値・配列・オブジェクトは JSON.stringify() で文字列に変換して保存し、取得時は JSON.parse() で戻す
getItem() はデータがないとき null を返すので必ずチェックを入れる

次回予告

LocalStorageの基本操作が整理できました。次回はこれを使って「ToDoリスト」を作ります。追加・削除・完了チェックの機能を実装していきましょう。

→ #33｜ToDoリストを作ろう ── 追加・削除・完了チェック

いいなと思ったら応援しよう！

よろしければ応援お願いします！いただいたチップは引き続きプログラミングや学びについて、皆さんの利益になるようなよい記事を書くことで恩返しをさせていただきます！