JavaScript入門 #18 - localStorage

入門 | 10分 で読める | 2026.06.14

公式ドキュメント
実演JavaScriptlocalStorage

このシリーズについて

「JavaScript入門」第18回です。今回は、ブラウザにデータを保存する localStorage を扱います。

localStorageとは

localStorage は、ブラウザにキーと値の組み合わせでデータを保存する仕組みです。ページを再読み込みしても残ります。

localStorageに保存できる値は文字列です。オブジェクトを保存する時はJSONに変換します。

今回作るもの

名前を保存し、再読み込み後も表示できる小さなページを作ります。

Step 1: HTMLを用意する

localstorage.html を作ります。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>localStorage</title>
  </head>
  <body>
    <input id="nameInput" type="text">
    <button id="saveButton">保存</button>
    <button id="clearButton">削除</button>
    <p id="message"></p>

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

Step 2: 文字列を保存する

setItem で保存します。

const nameInput = document.querySelector("#nameInput");
const saveButton = document.querySelector("#saveButton");
const message = document.querySelector("#message");

saveButton.addEventListener("click", () => {
  localStorage.setItem("userName", nameInput.value);
  message.textContent = "保存しました";
});

ブラウザの開発者ツールのApplicationタブで、保存された値を確認できます。

Step 3: 保存済みの値を読み込む

getItem で保存済みの値を取得します。

const savedName = localStorage.getItem("userName");

if (savedName !== null) {
  nameInput.value = savedName;
  message.textContent = `${savedName}さん、おかえりなさい`;
}

ページ読み込み時に実行されるよう、ファイルの上の方に置きます。

Step 4: 保存値を削除する

removeItem で特定のキーを削除します。

const clearButton = document.querySelector("#clearButton");

clearButton.addEventListener("click", () => {
  localStorage.removeItem("userName");
  nameInput.value = "";
  message.textContent = "削除しました";
});

Step 5: オブジェクトを保存する

オブジェクトは、そのままでは保存できません。JSON文字列に変換します。

const settings = {
  theme: "dark",
  fontSize: 16
};

localStorage.setItem("settings", JSON.stringify(settings));

const savedSettings = JSON.parse(localStorage.getItem("settings"));
console.log(savedSettings.theme);

注意: localStorageには、パスワード、秘密情報、認証トークンなど漏れたら困る値を保存しないでください。JavaScriptから読めるため、XSS時に盗まれる可能性があります。

よくあるエラー

エラーよくある原因確認する場所
[object Object] と保存されるJSON.stringifyしていない保存前の変換
JSON.parse でエラー保存値がJSONではないlocalStorageの中身
値が残り続けるremoveItemしていない削除処理

次のステップ

JavaScript入門 #19 - エラー処理とtry/catch で、失敗する可能性がある処理の扱い方を学びます。

まとめ

localStorageは、ブラウザに文字列データを保存する仕組みです。設定値や軽い状態保存には便利ですが、秘密情報は保存しません。オブジェクトを扱う時はJSONと組み合わせます。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR