HTML DOM Storageのlengthプロパティの使い方を解説
HTML DOM Storageのlengthプロパティとは
HTML DOMのlengthプロパティは、ブラウザのストレージオブジェクト内に保存されているアイテム（データ）の数を取得するために使用されます。ストレージオブジェクトには、localStorageオブジェクトとsessionStorageオブジェクトの2種類があります。
lengthプロパティは読み取り専用であり、引数は不要です。ストレージに何も保存されていない場合は「0」を返します。
構文
localStorageオブジェクトの場合
localStorage.length;
sessionStorageオブジェクトの場合
sessionStorage.length;
使用例
以下は、Storageのlengthプロパティを使用したサンプルコードです。ボタンをクリックすると、ローカルストレージに保存されているアイテムの数が表示されます。
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Storage lengthプロパティの例</h1>
<p>下のボタンをクリックすると、localStorageオブジェクトに保存されているアイテム数を取得できます</p>
<button onclick="itemNum()">GET NUMBER</button>
<p id="Sample"></p>
<script>
function itemNum() {
var num = localStorage.length;
document.getElementById("Sample").innerHTML = "保存されているアイテム数： "+num;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「GET NUMBER」ボタンをクリックすると、ストレージ内のアイテム数が表示されます。
まとめ
lengthプロパティを使うことで、localStorageやsessionStorageに保存されているデータの件数を簡単に確認できます。ストレージの内容を管理したり、デバッグを行ったりする際に便利なプロパティなので、ぜひ活用してみてください。
-
HTML DOMのnameプロパティとは？構文と使い方を実例で解説
HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン
-
HTML DOM textContentプロパティの使い方を徹底解説
HTML DOMのtextContentプロパティは、ノードおよびそのすべての子ノードが持つテキスト（空白文字を含む）に対応する文字列を、取得・設定できるプロパティです。JavaScriptでDOM操作を行う際に、要素内のテキストを簡単に扱うために広く利用されています。textContentプロパティの構文文字列値の取得Node.textContent戻り値は以下のいずれかになります。documentノードの場合は「null」指定したノードとそのすべての子ノードのテキスト文字列値の設定Node.textContent = string注意： textContentプロパティに値を設定すると、ノ