SessionStorageの動作確認

SessionStorageの動きを確認する

SessionStorageはLocalStorage同様、「保存・取得・削除」をとても簡単に扱えますが、ここでは、テストプログラムを使って、実際の挙動（上書き・永続化・削除の影響）を確認していきたいと思います。

下記のボタンを押下することで、テストプログラムの起動が可能です。

👉 本記事のテストプログラムを動かすことで、「SessionStorageの本当の動き」が体感できます。

テストプログラムの概要（かんたん説明）

このプログラムは、2つの入力欄を使います。

キーワード1 → "keyword1"として保存キーワード2 → "keyword2"として保存

それぞれに対して：

保存
取得
削除

ができるシンプルな構成です。

操作手順

手順①：本頁の「テストプログラム起動」を押す

テストプログラム起動 👉 起動時に、保存されたデータがある場合、「取得」が使えるようになります

手順②：値を入力する

「キーワード1」または「キーワード2」に文字を入力 👉 入力すると「保存」ボタンが押せるようになります

手順③：「保存」を押す

SessionStorageにデータが保存されます 👉 この時点で「取得」「削除」「全削除」が使えるようになります

手順④：「取得」を押す

保存したデータが入力欄に復元されます

手順⑤：「削除」を押す

対象のデータだけ削除されます 👉 対象のデータの「取得」「保存」「削除」「全削除」が使えなくなります

手順⑥：「全削除」を押す

すべてのデータが削除されます 👉 全てのデータの「取得」「保存」「削除」「全削除」が使えなくなります

動作確認を実施する

このテストで確認したいこと

このテストでは、次のことを確認していきたいと思います：

データがブラウザに保存される仕組み
ページをリロードしてもデータが残ること
上書き保存の動き
削除・全削除の違い
ページを閉じると消去されること

実際の操作手順（ここが重要）

「キーワード1」と「キーワード2」に文字を入力する
「保存」を押し、データを保存する

👉 sessionStorage.setItem()の動作を確認します

F5や再読み込みを実行した後、テストプログラム再起動し、「所得」を押す

入力した文字列が消えずに残っていることを確認します 👉 sessionStorage.getItem()の動作を確認します

「キーワード1」または「キーワード2」の文字を書き換え、「保存」を押す

書き換えた文字列で上書きされます 👉 sessionStorage.setItem()の上書き動作を確認します

再びF5や再読み込みを実行した後、テストプログラム再起動し、「取得」を押す。

データが書き換えられていることを確認します

「キーワード1」または「キーワード2」の「削除」を押す

対象のデータだけ削除されることを確認します 👉 sessionStorage.removeItem()の動作を確認します

削除したキーワードに文字を入力し、「保存」を押す
手順：「全削除」を押す

すべてのデータが削除されることを確認します 👉 sessionStorage.clear()の動作を確認します

再び、「キーワード1」と「キーワード2」に文字を入力する
「保存」を押し、データを保存する
ブラウザのタブを閉じ、再度開いた後、テストプログラム再起動する

すべてのデータが削除されていることを確認します

テスト結果まとめ

SessionStorageは「保存・取得・削除」がシンプル
ページをリロードしてもデータは残る
同じキーは上書きされる
タブを閉じるとデータが消える
indexの順序は保証されない為、注意が必要

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

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

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Session Storage Test</title>
  <link rel="stylesheet" href="./style.css">
  <script type="text/javascript" src="./script.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>
    <fieldset>
      <legend>[[ Session Storage の内部状態 ]]</legend>
      <div id="storage-info"></div>
    </fieldset>
  </p>
  <p>
    <div id="popup-status"></div>
  </p>
</body>
</html>

body {
  padding: 1rem;
  background-color: rgb(253, 191, 76);
  text-align: center;
}
#popup-status {
    font-size: 1.25rem;
    font-weight: bold;
    color: red;
    margin-bottom: 1rem;
}
#storage-info {
  white-space: pre-wrap;
}

JavaScript

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

  // 表示用要素取得
  const status = document.getElementById("popup-status");
  const storageInfo = document.getElementById("storage-info");

  // SessionStorageの内部状態を表示する関数
  function updateStorageInfo() {
    storageInfo.textContent = `保存数: ${sessionStorage.length}`;
    for (let i = 0; i < sessionStorage.length; i++) {
      const key = sessionStorage.key(i);
      const value = sessionStorage.getItem(key);
      storageInfo.textContent += `\n(index:${i})${key}: ${value}`;
    }
    for (let i = 0; i < 2 - sessionStorage.length; i++) {
      storageInfo.textContent += `\n(空)`;
    }
  }

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

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

    // 保存ボタン押下時に、取得、削除、全削除の各ボタンのを有効化して、SessionStorageに値を保存
    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;
      sessionStorage.setItem(keyword, document.getElementById(keyword).value); // SessionStorageに値を保存
      status.textContent = `${keyword}に${document.getElementById(keyword).value}が登録されました。`
      updateStorageInfo();
    });

    // 取得ボタン押下時に、保存、削除、全削除の各ボタンのを有効化して、SessionStorageから値を取得
    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 = sessionStorage.getItem(keyword); // SessionStorageから値を取得
      status.textContent = `${keyword}の値が取得されました。`
      updateStorageInfo();
    });

    // 削除ボタン押下時に、保存、取得、削除、全削除の各ボタンのを無効化して、SessionStorageから値を削除
    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;
      sessionStorage.removeItem(keyword); // SessionStorageから値を削除
      status.textContent = `${keyword}の値が削除されました。`
      updateStorageInfo();
    });

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

  // 全削除ボタン押下時に、保存、取得、削除、全削除の各ボタンのを無効化して、SessionStorageから全ての値を削除
  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;
    sessionStorage.clear(); // SessionStorageから全ての値を削除
    status.textContent = "全キーワードの値が削除されました。";
    updateStorageInfo();
  });
  updateStorageInfo();
});

✒️ SessionStorageの動作確認

SessionStorageの動きを確認する

テストプログラムの概要（かんたん説明）

このプログラムは、2つの入力欄を使います。

操作手順

手順①：本頁の「テストプログラム起動」を押す

手順②：値を入力する

手順③：「保存」を押す

手順④：「取得」を押す

手順⑤：「削除」を押す

手順⑥：「全削除」を押す

動作確認を実施する

このテストで確認したいこと

実際の操作手順（ここが重要）

テスト結果まとめ

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

🔗 関連記事

🆕 最新の記事

📚 カテゴリー

🔖 タグ

📜 重要事項

✒️ SessionStorageの動作確認

SessionStorageの動きを確認する

テストプログラムの概要（かんたん説明）

このプログラムは、2つの入力欄を使います。

操作手順

手順①：本頁の「テストプログラム起動」を押す

手順②：値を入力する

手順③：「保存」を押す

手順④：「取得」を押す

手順⑤：「削除」を押す

手順⑥：「全削除」を押す

動作確認を実施する

このテストで確認したいこと

実際の操作手順（ここが重要）

テスト結果まとめ

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

🔗 関連記事

🆕 最新の記事

📚 カテゴリー

🔖 タグ

📜 重要事項

【 SessionStorageのテスト 】

【　SessionStorageのテスト　】