JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでlocalStorageをクリアする方法

JavaScriptを使ってlocalStorageのデータをすべて削除するには、主に2つの方法があります。

方法1：clear()メソッドを使う

もっともシンプルなのは、localStorageが提供しているclear()メソッドを呼び出す方法です。これだけで保存されているすべてのキーと値が一括削除されます。

localStorage.clear();

方法2：ループ処理ですべてのキーを削除する

for...in文でlocalStorage内の各キーを順番に取り出し、個別にdelete演算子で削除する方法もあります。

for (key in localStorage) {
  delete localStorage[key];
}

どちらの方法でも、localStorageに保存されたデータを完全にクリアできます。用途やコードの可読性に応じて使い分けるとよいでしょう。

実装例

以下は、Web Storage対応ブラウザかどうかを判定した上で、データを保存し、その後クリアして表示するサンプルコードです。

<html>
<body>
<p id = "storage"></p>
<script>
if (typeof(Storage) !== "undefined") {
    localStorage.setItem("product", "Tutorix");
    // 表示前にストレージをクリア
    localStorage.clear();
    document.getElementById("storage").innerHTML = localStorage.getItem("product");
}
else {
    document.getElementById("storage").innerHTML = "Sorry, no Web Storage compatibility...";
}
</script>
</body>
</html>

この例では、setItem()で「product」というキーに値を保存した直後にclear()を実行しています。そのため、getItem("product")はnullを返し、画面には何も表示されません。typeof(Storage)による判定により、Web Storage非対応の古いブラウザではエラーではなく警告メッセージを表示できる点もポイントです。

  1. HTML DOMのlocalStorage.clear()メソッドとは？使い方を徹底解説

    HTML DOMのローカルストレージ（LocalStorage）のclear()メソッドは、保存されているすべてのデータを一括で削除するためのメソッドです。特定のキーだけを削除するremoveItem()とは異なり、clear()を呼び出すと、そのオリジン（ドメイン）に紐づくローカルストレージ内の全エントリが完全に消去されます。構文clear()メソッドの構文は以下のとおりです。localStorage.clear()セッションストレージに対して使用する場合は、次のようになります。sessionStorage.clear()パラメータと戻り値パラメータ：なし戻り値：なし（undefined）引

  2. HTML DOM Storage の removeItem() メソッドとは？構文と使い方を解説

    HTML DOM Storage の removeItem() メソッドは、指定したキー名を引数として渡すことで、Web ストレージから該当する項目を削除するためのメソッドです。localStorage と sessionStorage のどちらに対しても使用できます。構文Storage removeItem() メソッドの構文は以下のとおりです。localStorage.removeItem(keyname);またはsessionStorage.removeItem(keyname);ここで keyname は文字列型の値で、削除したい項目のキー名を表します。指定したキーがストレージ内に存在