Storageのデータを消去する－JavaScript入門（HTML5編）

HOME
JavaScript入門[HTML5編]
Storageのデータを消去する

このページでは、Storageに書き込んだデータを消去する方法について見ていきます。 cookieの場合、データ保持期間を定めて書き込みを行ないますが、ローカルストレージではずっとデータが残ります。それで意図的に消去しないと、ゴミデータが蓄積されてしまうことになりかねません。

Storageのデータ消去方法

では最初にデータを消去する方法を見ておきましょう。

localStorage.removeItem(キー名): ローカルストレージの指定されたキー名のデータを消去します。
sessionStorage.removeItem(キー名): セッションストレージの指定されたキー名のデータを消去します。
localStorage.clear(): ローカルストレージの全データを消去します。
sessionStorage.clear(): セッションストレージの全データを消去します。

removeItem()は任意のキー名のデータを選択的に消去するのに対して、 clear()は全データを消去します。clear()の使用は慎重に行なう必要があるでしょう。

データ消去のサンプルスクリプト

以下のサンプルでは、最初にローカルストレージに3種類のデータを書き込みます。その後一つのデータを削除し、さらに全データを消去します。各段階でalert()を使い、データ数などを表示させて確認します。

<form>
<input type="button" id="btn" value="データの書込と消去">
</form>

<script>

document.getElementById("btn").addEventListener("click",function(){

  //最初にデータを3種類書き込む
  localStorage.setItem("apple","リンゴ");
  localStorage.setItem("grape","ブドウ");
  localStorage.setItem("lemon","レモン");

  alert( localStorage.length );  //データ総数を表示→3
  alert( localStorage.getItem("apple") );  //key名appleのデータを表示→リンゴ
  
  localStorage.removeItem("apple");  //key名appleを消去

  alert( localStorage.length );  //データ総数を表示→2
  alert( localStorage.getItem("apple") );  //key名appleのデータを表示→null

  localStorage.clear();  //全データを消去

  alert( localStorage.length );  //データ総数を表示→0

},false);

</script>

＜サンプル＞

ボタンを押すと、「3」→「リンゴ」→「2」→「null」→「0」の順でアラート表示されると思います。

サンプルスクリプトの解説

では上記のサンプルを詳しく見ていきます。

フォームのボタン

<form>
<input type="button" id="btn" value="データの書込と消去">
</form>

前のページと同じく、ボタンにid名「btn」を付けて、後からクリックイベントを追加できるようにしています。

クリックイベントの追加

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

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

ローカルストレージにデータを3種類書き込む

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

alert( localStorage.length );
alert( localStorage.getItem("apple") );

クリックイベントの処理について今度は見ていきます。最初にsetItem()を使い、ローカルストレージに3種類にデータを書き込みました。

その後、lengthを用いてローカルストレージのデータ数をalert()で表示します。データ数は「3」となります。

またgetItem()を使ってkey名「apple」のデータを取得し、alert()で表示しています。「リンゴ」と表示されると思います。

key名「apple」を消去する

localStorage.removeItem("apple");

alert( localStorage.length );
alert( localStorage.getItem("apple") );

今度はremoveItem()を使い、key名「apple」を消去しています。その後lengthでローカルストレージのデータ数をアラート表示しました。一つ減って「2」になります。

本当にデータが消えたか、getItem()でkey名「apple」のデータを取得し、アラート表示しました。データが存在していないため、「null」と表示されます（FireFoxでは空で表示）。

ローカルストレージの全データを消去する

localStorage.clear();

alert( localStorage.length );

最後にclear()を使ってローカルストレージの全データを消去しました。その後lengthでデータ数を取得し、アラート表示しました。全てのデータが消えているので「0」と表示されます。

前へ次へ