Storageのデータを消去するremoveItem()とclear()の解説

HOME
更新日:2017.03.02
HOMEJavaScript入門(HTML5編) > Storageのデータを消去する

Storageのデータを消去する-JavaScript入門(HTML5編)

このページでは、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」と表示されます。