HTML DOM Storage の removeItem() メソッドとは？構文と使い方を解説
HTML DOM Storage の removeItem() メソッドは、指定したキー名を引数として渡すことで、Web ストレージから該当する項目を削除するためのメソッドです。localStorage と sessionStorage のどちらに対しても使用できます。
構文
Storage removeItem() メソッドの構文は以下のとおりです。
localStorage.removeItem(keyname);
または
sessionStorage.removeItem(keyname);
ここで keyname は文字列型の値で、削除したい項目のキー名を表します。指定したキーがストレージ内に存在しない場合でもエラーは発生せず、単に何も処理されません。なお、保存されているすべてのデータを一括で削除したい場合には clear() メソッドを使用します。
パラメータと戻り値
- keyname（文字列型・必須）：削除する項目のキー名
- 戻り値：なし（undefined）
使用例
実際に Storage removeItem() メソッドを使った例を見てみましょう。次のコードでは、あらかじめ「TEXT1」というキーでデータを保存しておき、DISPLAY ボタンをクリックするとその値を表示し、REMOVE ボタンをクリックすると該当するデータを削除します。
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center">Storage removeItem() method example</h1>
<p>下のボタンをクリックすると、localStorage の「TEXT1」を削除します</p>
<button onclick="itemDelete()">REMOVE</button>
<p>下のボタンをクリックすると、localStorage の「TEXT1」の値を表示します</p>
<button onclick="itemShow()">DISPLAY</button>
<p id="Sample"></p>
<script>
localStorage.setItem("TEXT1","HELLO WORLD");
function itemDelete() {
localStorage.removeItem("TEXT1");
itemShow();
}
function itemShow() {
var x = localStorage.getItem("TEXT1");
document.getElementById("Sample").innerHTML ="The 'TEXT1' key value is "+x;
}
</script>
</body>
</html>出力
このコードを実行すると、以下のように表示されます。
DISPLAY ボタンをクリックした場合：
REMOVE ボタンをクリックした場合：
まとめ
removeItem() メソッドを使えば、不要になった特定のデータだけを安全かつ簡単に削除できます。キーが存在しない場合でもエラーにならないため、データの保存・参照・削除を組み合わせる Web アプリケーションで幅広く活用できる便利なメソッドです。
-
HTML DOM StorageのgetItem()メソッドとは？構文と使い方をサンプルコード付きで解説
HTML DOMのStorage getItem()メソッドは、指定したキー名を引数として渡すことで、Webストレージ（localStorage・sessionStorage）に保存された値を取得するためのメソッドです。キーに対応する値を返し、指定した名前のキーが存在しない場合にはnullが返されます。構文Storage getItem()メソッドの基本構文は以下のとおりです。localStorage.getItem(keyname);またはsessionStorage.getItem(keyname);ここで keyname は文字列型の値であり、取得したい項目のキー名を表します。local
-
HTML DOM の storage イベントとは?基本構文とサンプルコードを解説
HTML DOM の storage イベントは、ウィンドウのストレージ領域(localStorage や sessionStorage)に変更が加えられたときに発生します。このイベントには重要な特徴があり、同じウィンドウ内での変更では発火せず、別のウィンドウやタブがそのストレージ領域を変更した場合にのみトリガーされるという点です。これにより、複数のタブ間でデータの同期を取る処理などに活用できます。 storage イベントの主なプロパティ イベントオブジェクトからは、以下のような情報を取得できます。 event.key: 変更されたキーの名前 event.oldValue: 変更前の値 e