データ数とkey名の取得－JavaScript入門（HTML5編）

HOME
JavaScript入門[HTML5編]
データ数とkey名の取得

このページでは、Storageに保存されているデータの総数を調べる方法や、 key名を取得する方法について見ていきます。

データ数とkey名を取得する命令文

最初に、Storageのデータ数を確認したり、 key名を取得する命令を見ておきましょう。

localStorage.length: ローカルストレージに保存されているデータの総数を取得します。
sessionStorage.length: セッションストレージに保存されているデータの総数を取得します。
localStorage.key(n): ローカルストレージに保存されているn番目のkey名を取得します。
sessionStorage.key(n): セッションストレージに保存されているn番目のkey名を取得します。

データ数とkey名を確認するサンプルスクリプト

では実際にデータ総数とkey名を取得するサンプルを見てみることにしましょう。

以下のスクリプトでは、ボタンを押すとセッションストレージに3種類のkey名でデータを書込みます。その後、データ総数と3番目のkey名を取得して、それぞれアラート表示します。

<form>
<input type="button" id="btn" value="総数とkey名の確認">
</form>

<script>

//ボタンにクリックイベントを追加
document.getElementById("btn").addEventListener("click",function(){

  //とり合えず3種類のkey名でセッションストレージに書込
  sessionStorage.setItem("apple","リンゴ");
  sessionStorage.setItem("grape","ブドウ");
  sessionStorage.setItem("lemon","レモン");

  //セッションストレージの総数をアラートで表示
  alert( sessionStorage.length );

  //セッションストレージの3番目のkeyをアラートで表示
  alert( sessionStorage.key(2) );

},false);

</script>

＜サンプル＞

ボタンを押すと、データ総数とkey名がアラート表示されます。このページだけ見た人の場合、データ数は「3」と表示されます。しかし前のページでサンプルを動かした後このページに来た方は、データ数は「4」になります。

key名に関してはブラウザによって多少差が出ます。多くのブラウザではkey名がアルファベット順に並ぶようで、「lemon」が表示されます。しかしFireFoxでは「apple」と表示されたので、並び方を調べると「grape→(test)→lemon→apple」なっていました。このようにブラウザによって差が出ることを頭に入れておきましょう。

スクリプトの説明

では上記のスクリプトを詳しく見ていきましょう。

フォームのボタン

<form>
<input type="button" id="btn" value="総数とkey名の確認">
</form>

最初はフォームのボタンを見てみましょう。id名「btn」を付けています。これで後からクリックイベントを追加できます。

ボタンにクリックイベントを追加

document.getElementById("btn").addEventListener("click",function(){
  …処理…
},false);

続いてスクリプト部分を見ていきます。最初にid名「btn」が付いたボタンに、 addEventListener()を使ってクリックイベントを追加しています。

3種類のkey名でセッションストレージに書き込む

sessionStorage.setItem("apple","リンゴ");
sessionStorage.setItem("grape","ブドウ");
sessionStorage.setItem("lemon","レモン");

追加するクリックイベントについて今度は見ていきます。まず最初にsetItem()を使い、3種類のkey名でセッションストレージに書き込みを行ないます。

ストレージのデータ総数を取得する

alert( sessionStorage.length );

lengthを使いデータ総数を取得して、alert()にで表示します。先に３種類のデータを書き込んでいるので、総数は３以上になります。前のページから連続してこのページを見ている場合、key名「test」も存在しているので４になります。

ストレージに保存されたkey名を取得する

alert( sessionStorage.key(2) );

最後に、key()を使ってセッションストレージのkey名を取得しています。引数を2にしているので、3番目のkeyの名称を取得できます（0から数えるので）。それをalert()で表示します。ブラウザによって取得されるkey名が異なるのは上述の通りです。

次のページでは、ストレージのデータを消去する方法を見ていきます。

前へ次へ