LocalStorageの動作確認

✒️ LocalStorageの動作確認

投稿日：2026-04-16

最終更新日：2026-04-16

ここでは、実際に簡単なテストプログラムを作成して、LocalStorageのAPIを呼び出し、その動作をみていきたいと思います。

テストプログラムの概要

本テストプログラムでは、キーワード１とキーワード２の２つのキーワードをLocalStorageに保存できるようになっています。

キーワード１の値は"keyword1"というキーで、キーワード2の値は、"keyword2"というキーで保存されています。

起動時に、"keyword1", "keyword2"のキーで値が既に保存されていた場合は、「取得」ボタンが有効化されます。

全てのボタンが無効化されている場合は、値を入力すれば、「保存」ボタンが有効化され、保存が可能になります。値を「保存」した場合、「取得」と「削除」ボタンが有効化されます。

既に、"keyword1", "keyword2"のキーで値が保存されている場合でも、「削除」ボタンで値を削除しなくても、値を入力して「保存」ボタンを押せば上書きされます。

「全削除」ボタン押下時は、両方の値が削除されます。

テストプログラムの動作確認

まずは、下記のボタンをクリックして、動作を確認してください。

実際にデータを入力し「保存」ボタンで登録した後、タブをリロードしたり、別のタブを開いてもデータが残っていることや「削除」ボタン、「全削除」ボタンにより登録したデータが削除されることが確認できると思います。

テストプログラムのコード

下記に、本テストで使用したプログラムのコードを記します。

1. HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Local Storage Test</title>
  <link rel="stylesheet" href="./sample.css">
  <script type="text/javascript" src="./sample.js"></script>
</head>
<body>
  <div>
    <label for="keyword1">キーワード１:</label>
    <input type="text" id="keyword1" name="username" placeholder="値を入力してください">
    <button id="keyword1-save" disabled="true">保存</button>
    <button id="keyword1-get" disabled="true">取得</button>
    <button id="keyword1-delete" disabled="true">削除</button>
  </div>
  <div>
    <label for="keyword2">キーワード２:</label>
    <input type="text" id="keyword2" name="username" placeholder="値を入力してください">
    <button id="keyword2-save" disabled="true">保存</button>
    <button id="keyword2-get" disabled="true">取得</button>
    <button id="keyword2-delete" disabled="true">削除</button>
  </div>
  <p>
    <button id="keyword-erase" disabled="true">全削除</button>
  </p>
  <p>
    <div id="popup-status"></div>
  </p>
</body>
</html>

2. CSS

body {
  padding: 2rem;
  background-color: rgb(253, 191, 76);
  text-align: center;
}
#popup-status {
    font-size: 1.5rem;
    font-weight: bold;
    color: red;
    margin-bottom: 1rem;
}

3. JavaScript

//
// LocalStorageの動作確認用JavaScriptコード
//
window.addEventListener("load", function() {

  // ポップアップのステータス表示用要素取得
  const status = document.getElementById("popup-status");

  ['keyword1', 'keyword2'].forEach(function (keyword) {

    // キーワード入力欄の変更を監視して、保存ボタンを有効化
    document.getElementById(keyword).addEventListener('keyup', function(event) {
      document.getElementById(`${keyword}-save`).disabled = false;
    });

    // 保存ボタン押下時に、取得、削除、全削除の各ボタンのを有効化して、LocalStorageに値を保存
    document.getElementById(`${keyword}-save`).addEventListener('click', function(event) {
      document.getElementById(`${keyword}-get`).disabled = false;
      document.getElementById(`${keyword}-delete`).disabled = false;
      document.getElementById('keyword-erase').disabled = false;
      localStorage.setItem(keyword, document.getElementById(keyword).value); // LocalStorageに値を保存
      status.textContent = `${keyword}に${document.getElementById(keyword).value}が登録されました。`
    });

    // 取得ボタン押下時に、保存、削除、全削除の各ボタンのを有効化して、LocalStorageから値を取得
    document.getElementById(`${keyword}-get`).addEventListener('click', function(event) {
      document.getElementById(`${keyword}-save`).disabled = false;
      document.getElementById(`${keyword}-delete`).disabled = false;
      document.getElementById('keyword-erase').disabled = false;
      document.getElementById(keyword).value = localStorage.getItem(keyword); // LocalStorageから値を取得
      status.textContent = `${keyword}の値が取得されました。`
    });

    // 削除ボタン押下時に、保存、取得、削除、全削除の各ボタンのを無効化して、LocalStorageから値を削除
    document.getElementById(`${keyword}-delete`).addEventListener('click', function(event) {
      document.getElementById(keyword).value = "";
      document.getElementById(`${keyword}-save`).disabled = true;
      document.getElementById(`${keyword}-get`).disabled = true;
      document.getElementById(`${keyword}-delete`).disabled = true;
      document.getElementById('keyword-erase').disabled = true;
      localStorage.removeItem(keyword); // LocalStorageから値を削除
      status.textContent = `${keyword}の値が削除されました。`
    });

    // ページロード時に、LocalStorageに値が保存されている場合は、取得と削除の各ボタンを有効化
    if (localStorage.getItem(keyword)) {
      document.getElementById(`${keyword}-get`).disabled = false;
      document.getElementById('keyword-erase').disabled = false;
    }
  });

  // 全削除ボタン押下時に、保存、取得、削除、全削除の各ボタンのを無効化して、LocalStorageから全ての値を削除
  document.getElementById('keyword-erase').addEventListener('click', function(event) {
    ['keyword1', 'keyword2'].forEach(function (keyword) {
      document.getElementById(keyword).value = "";
      document.getElementById(`${keyword}-save`).disabled = true;
      document.getElementById(`${keyword}-get`).disabled = true;
      document.getElementById(`${keyword}-delete`).disabled = true;
    });
    document.getElementById('keyword-erase').disabled = true;
    localStorage.clear(); // LocalStorageから全ての値を削除
    status.textContent = "全キーワードの値が削除されました。";
  });
});

前の記事一覧