HTML DOM StorageのgetItem()メソッドとは？構文と使い方をサンプルコード付きで解説
HTML DOMのStorage getItem()メソッドは、指定したキー名を引数として渡すことで、Webストレージ（localStorage・sessionStorage）に保存された値を取得するためのメソッドです。キーに対応する値を返し、指定した名前のキーが存在しない場合にはnullが返されます。
構文
Storage getItem()メソッドの基本構文は以下のとおりです。
localStorage.getItem(keyname);
または
sessionStorage.getItem(keyname);
ここで keyname は文字列型の値であり、取得したい項目のキー名を表します。
localStorageとsessionStorageの違い
localStorage はブラウザを閉じてもデータが保持され続ける永続的なストレージである一方、sessionStorage はタブやセッションが終了するとデータが削除される一時的なストレージです。保存したいデータの性質に応じて、適切に使い分けることが重要です。
サンプルコード
次に、HTML DOM Storage getItem()メソッドの具体的な使用例を見てみましょう。以下の例では、「CREATE」ボタンをクリックした回数をlocalStorageに記録し、「Display」ボタンを押すとその値を取得して画面に表示します。
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Storage getItem() method example</h1>
<p>下のボタンをクリックすると、クリック回数を記録するlocalStorageアイテムが作成されます</p>
<button onclick="createItem()">CREATE</button>
<p>下のボタンをクリックすると、記録された値を取得して表示します</p>
<button onclick="showItem()">Display</button>
<p id="Sample"></p>
<script>
var y=1;
function createItem() {
document.getElementById("Sample").innerHTML="localStorage Item has been created with name CLICKS";
localStorage.visits = y;
y++;
}
function showItem() {
var x = localStorage.getItem("visits");
document.getElementById("Sample").innerHTML = "The total no. of clicks are : "+x;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、最初に以下のような画面が表示されます。
「CREATE」ボタンをクリックすると、クリック回数を記録するlocalStorageアイテムが作成され、クリックするたびにカウントが更新されます。
続いて「Display」ボタンをクリックすると、getItem()メソッドによって取得されたクリックの合計回数が画面に表示されます。
まとめ
getItem()メソッドを使えば、保存済みのデータを簡単に取り出すことができます。存在しないキーを指定した場合はnullが返されるため、実際の開発では戻り値がnullかどうかをチェックする処理を組み合わせると、より堅牢なコードになります。
-
HTML DOM Storage の removeItem() メソッドとは？構文と使い方を解説
HTML DOM Storage の removeItem() メソッドは、指定したキー名を引数として渡すことで、Web ストレージから該当する項目を削除するためのメソッドです。localStorage と sessionStorage のどちらに対しても使用できます。構文Storage removeItem() メソッドの構文は以下のとおりです。localStorage.removeItem(keyname);またはsessionStorage.removeItem(keyname);ここで keyname は文字列型の値で、削除したい項目のキー名を表します。指定したキーがストレージ内に存在
-
HTML DOM Storage key()メソッドの使い方を徹底解説
HTML DOM Storage key()メソッドとはHTML DOMのStorage key()メソッドは、ストレージオブジェクト内の指定したインデックス位置に保存されているキー名を取得するためのメソッドです。取得したいキーの番号（インデックス）は、引数としてkey()メソッドに渡します。このメソッドで利用できるストレージオブジェクトは、sessionStorageオブジェクトとlocalStorageオブジェクトの2種類です。構文Storage key()メソッドの基本構文は以下のとおりです。localStorageの場合localStorage.key(index);sessionSt