HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Storage key()メソッドの使い方を徹底解説

HTML DOM Storage key()メソッドとは

HTML DOMのStorage key()メソッドは、ストレージオブジェクト内の指定したインデックス位置に保存されているキー名を取得するためのメソッドです。取得したいキーの番号（インデックス）は、引数としてkey()メソッドに渡します。

このメソッドで利用できるストレージオブジェクトは、sessionStorageオブジェクトとlocalStorageオブジェクトの2種類です。

構文

Storage key()メソッドの基本構文は以下のとおりです。

localStorageの場合

localStorage.key(index);

sessionStorageの場合

sessionStorage.key(index);

ここでindexは整数型の値で、キー名を取得したいキーの番号を表します。なお、指定したインデックスにキーが存在しない場合はnullが返される点に注意してください。

使用例

それでは、Storage key()メソッドの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">storage key()メソッドの使用例</h1>
<p>下のボタンをクリックすると、2番目のキー名を取得できます</p>
<button onclick="keyName()">GET NAME</button>
<p id="Sample"></p>
<script>
   function keyName() {
      var k = localStorage.key(1);
      document.getElementById("Sample").innerHTML ="localStorageの2番目のキー名は "+k+" です";
   }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、ブラウザには次のように表示されます。

HTML DOM Storage key()メソッドの使い方を徹底解説

GET NAMEボタンをクリックすると、インデックス「1」に対応するキー名が以下のように出力されます。

HTML DOM Storage key()メソッドの使い方を徹底解説

まとめ

Storage key()メソッドを使えば、Web Storageに保存されているデータのキー名をインデックス番号から簡単に取得できます。localStorage・sessionStorageのどちらでも同じように動作するため、保存済みデータの一覧確認やデバッグ時に活用すると非常に便利です。

  1. HTML DOM StorageのgetItem()メソッドとは？構文と使い方をサンプルコード付きで解説

    HTML DOMのStorage getItem()メソッドは、指定したキー名を引数として渡すことで、Webストレージ（localStorage・sessionStorage）に保存された値を取得するためのメソッドです。キーに対応する値を返し、指定した名前のキーが存在しない場合にはnullが返されます。構文Storage getItem()メソッドの基本構文は以下のとおりです。localStorage.getItem(keyname);またはsessionStorage.getItem(keyname);ここで keyname は文字列型の値であり、取得したい項目のキー名を表します。local

  2. HTML DOM の storage イベントとは?基本構文とサンプルコードを解説

    HTML DOM の storage イベントは、ウィンドウのストレージ領域(localStorage や sessionStorage)に変更が加えられたときに発生します。このイベントには重要な特徴があり、同じウィンドウ内での変更では発火せず、別のウィンドウやタブがそのストレージ領域を変更した場合にのみトリガーされるという点です。これにより、複数のタブ間でデータの同期を取る処理などに活用できます。 storage イベントの主なプロパティ イベントオブジェクトからは、以下のような情報を取得できます。 event.key: 変更されたキーの名前 event.oldValue: 変更前の値 e