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

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

HTML DOMのローカルストレージ（LocalStorage）のclear()メソッドは、保存されているすべてのデータを一括で削除するためのメソッドです。特定のキーだけを削除するremoveItem()とは異なり、clear()を呼び出すと、そのオリジン（ドメイン）に紐づくローカルストレージ内の全エントリが完全に消去されます。

構文

clear()メソッドの構文は以下のとおりです。

localStorage.clear()

セッションストレージに対して使用する場合は、次のようになります。

sessionStorage.clear()

パラメータと戻り値

  • パラメータ：なし
  • 戻り値：なし（undefined）

引数を取らず、単純にストレージ全体を空にするシンプルなメソッドです。

使用例

ここでは、LocalStorageのclear()メソッドを使った具体的なサンプルコードを紹介します。ボタンをクリックしてデータを保存し、その後すべてのデータを削除する流れを確認できます。

<!DOCTYPE html>
<html>
<head>
<title>LocalStorage clear()</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    table,th,td {
        border:1px solid black;
        border-collapse: collapse;
        margin: 0 auto;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>LocalStorage clear( )</legend>
<table>
<tr>
<th>キー</th>
<th>値</th>
</tr>
<tr>
<td>PassKey</td>
<td>ja12ertplo</td>
</tr>
</table>
<input type="button" value="キーを保存" onclick="storeData()">
<input type="button" value="キーを削除" onclick="clearData()">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    function clearData(){
        localStorage.clear();
        divDisplay.textContent = '削除に成功しました';
    }
    function storeData(){
        localStorage.setItem('PassKey','ja12ertplo');
        divDisplay.textContent = '保存に成功しました';
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような結果が得られます。

「キーを保存」ボタンをクリックした後

setItem()メソッドによって「PassKey」とその値がローカルストレージに保存され、画面に保存完了のメッセージが表示されます。

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

「キーを削除」ボタンをクリックした後

clear()メソッドが実行され、ローカルストレージ内のすべてのデータが削除され、削除完了のメッセージが表示されます。

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

まとめ

localStorage.clear()メソッドは、引数なしで呼び出すだけでストレージ内の全データを削除できる便利なメソッドです。ユーザーのログアウト時やキャッシュデータのリセット時など、保存データをまとめて消去したい場面で活用できます。なお、削除したデータは元に戻せないため、実行のタイミングには注意が必要です。

  1. HTML DOM StorageのgetItem()メソッドとは？構文と使い方をサンプルコード付きで解説

    HTML DOMのStorage getItem()メソッドは、指定したキー名を引数として渡すことで、Webストレージ（localStorage・sessionStorage）に保存された値を取得するためのメソッドです。キーに対応する値を返し、指定した名前のキーが存在しない場合にはnullが返されます。構文Storage getItem()メソッドの基本構文は以下のとおりです。localStorage.getItem(keyname);またはsessionStorage.getItem(keyname);ここで keyname は文字列型の値であり、取得したい項目のキー名を表します。local

  2. HTML DOM の storage イベントとは?基本構文とサンプルコードを解説

    HTML DOM の storage イベントは、ウィンドウのストレージ領域(localStorage や sessionStorage)に変更が加えられたときに発生します。このイベントには重要な特徴があり、同じウィンドウ内での変更では発火せず、別のウィンドウやタブがそのストレージ領域を変更した場合にのみトリガーされるという点です。これにより、複数のタブ間でデータの同期を取る処理などに活用できます。 storage イベントの主なプロパティ イベントオブジェクトからは、以下のような情報を取得できます。 event.key: 変更されたキーの名前 event.oldValue: 変更前の値 e