本文へ移動
Web Storage API
この記事では「Web Storage API」について、基本の意味と使い方を初心者向けにやさしく説明します。
A method that deletes all stored data in Web Storage at once and resets it to a clean state.
clear()
このページでわかること
clear()が削除する範囲- 1件だけ消す
removeItem()との使い分け
- 保存データを消す操作を利用者へ伝える方法
Web Storage に保存されたすべてのデータを一度に消して、保存領域をまっさらな状態に戻すためのメソッド。
clear() とは？
clear() は、Web Storage（たとえば localStorage や sessionStorage）の中に入っているデータをぜんぶ消すメソッドです。
1つずつ削除する必要はなく、「まっさらな状態に戻す」イメージです。
使い方のイメージ
たとえば、保存していたユーザー設定や入力データを一度リセットしたいときに使います。
ボタンを押すと、保存していた情報をすべて削除するようにできます。
<button id="resetBtn">すべて削除</button>
<script>
const resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("click", () => {
// localStorage の中身を全部削除
localStorage.clear();
alert("保存データをすべて削除しました！");
});
</script>
注意ポイント
clear() は指定したキーだけを消すことはできません。
すべて削除されます。- 削除してしまうと、元に戻すことはできません。
「リセット前に確認する」仕組みをつけると安全です。