JavaScript | Web API：ストレージ系 API － removeItem / clear

JavaScript JavaScript
スポンサーリンク

removeItem / clear は「部分的に消す」と「全部消す」の違い

ストレージ系 API（localStorage / sessionStorage）には、
データを「書く」「読む」だけでなく、「消す」ための操作も用意されています。

removeItem
特定のキーだけ消す（ピンポイントで消す消しゴム）

clear
そのストレージに入っているものを全部消す（メモ帳をまっさらにする）

どちらも「いつ・何を消すか」をちゃんと意識して使うと、
アプリの挙動が分かりやすく、バグも減ります。

removeItem の基本：特定のキーだけを消す

使い方の形

基本形はとてもシンプルです。

ストレージ.removeItem(キー);
JavaScript

localStorage ならこう。

localStorage.removeItem("username");
JavaScript

sessionStorage ならこう。

sessionStorage.removeItem("username");
JavaScript

これで、そのストレージの中から
キー "username" に対応するデータだけが削除されます。

存在しないキーを指定してもエラーにはならない

removeItem の挙動で覚えておきたいのは、
存在しないキーを指定してもエラーにならない という点です。

localStorage.removeItem("not-exist-key"); // 何も起きない（エラーにもならない）
JavaScript

なので、事前に「あるかどうか」を確認してから消す必要はありません。
「とりあえず消しておきたい」という用途にも気軽に使えます。

例題：ログアウト時にユーザー情報だけ消す

よくあるパターンとして、「ログアウト時にユーザー関連の情報だけ消す」というケースを考えます。

例えば、こんな感じで保存しているとします。

localStorage.setItem("userToken", "abc123");
localStorage.setItem("theme", "dark");
localStorage.setItem("language", "ja");
JavaScript

ログアウトするときに、
「トークンだけ消したい」「テーマや言語設定は残したい」
ということがあります。

その場合は removeItem を使います。

function logout() {
  localStorage.removeItem("userToken");
  // テーマや言語はそのまま
}
JavaScript

ここで clear を使ってしまうと、
テーマや言語設定まで全部消えてしまいます。

「一部だけ消したいときは removeItem」
「全部消したいときは clear」
という使い分けが大事です。

clear の基本：そのストレージをまっさらにする

使い方の形

clear は引数なしで呼びます。

ストレージ.clear();
JavaScript

localStorage ならこう。

localStorage.clear();
JavaScript

sessionStorage ならこう。

sessionStorage.clear();
JavaScript

そのストレージに入っている「全部」が消える

clear を呼ぶと、そのストレージに保存されている
すべてのキーと値が削除されます。

例えば、こういう状態だったとします。

localStorage.setItem("userToken", "abc123");
localStorage.setItem("theme", "dark");
localStorage.setItem("language", "ja");
JavaScript

ここで localStorage.clear() を呼ぶと、
userToken も theme も language も、全部消えます。

localStorage.getItem("userToken"); // null
localStorage.getItem("theme");     // null
localStorage.getItem("language");  // null
JavaScript

例題：アプリの「リセット」ボタン

アプリに「すべての設定をリセット」ボタンを作るとします。

ユーザーがいろいろ設定を変えたり、
TODO を追加したりしているけれど、
「全部一度リセットしたい」というケースです。

そのときに、
「このアプリが localStorage に保存しているものは全部消していい」
と決めているなら、clear が使えます。

function resetApp() {
  localStorage.clear();
  location.reload(); // ページをリロードして初期状態に戻す
}
JavaScript

ただし、ここは注意が必要です。

同じドメインで、他のスクリプトも localStorage を使っている場合、
それらのデータも全部消えてしまいます。

「このドメインで localStorage を使っているのは自分のアプリだけ」
という前提があるときに、clear は気持ちよく使えます。

removeItem と clear の違いを「設計」として意識する

「何を残して、何を消すか」を決める

プロジェクトが大きくなると、
localStorage / sessionStorage に保存するものが増えていきます。

ユーザー設定
一時的なキャッシュ
ログイン情報
UI の状態

このときに大事なのは、
「どのタイミングで、何を消すべきか」を設計しておくこと です。

例えば、こういうルールを決められます。

ログアウト時
認証情報（トークンなど）は消す
ユーザー設定（テーマ、言語）は残す

アプリの完全リセット時
そのアプリが使っているキーは全部消す

このルールに合わせて、

ログアウト → removeItem("userToken") など、必要なキーだけ消す
リセット → clear() で全部消す（または、自分が使っているキーだけ removeItem する）

というコードになります。

「とりあえず clear しておけばいいや」ではなく、
「この操作は、どのデータを消すべきか？」を一度立ち止まって考える
のが、設計として大事なポイントです。

「自分のアプリが使っているキー」を意識する

clear は便利ですが、
「同じドメインで他のコードも localStorage を使っている」場合には注意が必要です。

例えば、同じドメインで

アプリ A: localStorage.setItem("appA:theme", "dark")
アプリ B: localStorage.setItem("appB:token", "xyz")

というように、別々のキーを使っているとします。

ここでアプリ A が localStorage.clear() を呼ぶと、
アプリ B のデータも消えてしまいます。

こういう状況を避けるために、
キーにプレフィックスを付けることがよくあります。

localStorage.setItem("myApp:theme", "dark");
localStorage.setItem("myApp:language", "ja");
JavaScript

そして、「自分のアプリのキーだけを消す」関数を作ることもできます。

function clearMyAppData() {
  const prefix = "myApp:";
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    if (key !== null && key.startsWith(prefix)) {
      localStorage.removeItem(key);
    }
  }
}
JavaScript

こうすると、
他のアプリのデータには触らずに、
自分のアプリのデータだけを消せます。

ここでのポイントは、
「clear は強力すぎるので、状況によっては removeItem を組み合わせて“自分の領域だけ消す”設計にする」
という発想です。

sessionStorage での removeItem / clear の使いどころ

タブごとの一時状態をリセットする

sessionStorage は「タブごとの一時メモ帳」でした。

例えば、ページ内のウィザードの現在ステップを保存しているとします。

sessionStorage.setItem("currentStep", "2");
JavaScript

ウィザードを「最初からやり直す」ボタンを押したときに、
ステップ情報だけリセットしたいなら removeItem。

function restartWizard() {
  sessionStorage.removeItem("currentStep");
  showStep(1);
}
JavaScript

もし、そのタブ内で使っている一時状態を全部リセットしたいなら clear。

function resetSessionState() {
  sessionStorage.clear();
}
JavaScript

タブを閉じれば sessionStorage 自体は消えますが、
「タブを閉じずに一時状態だけリセットしたい」
というときに removeItem / clear が役に立ちます。

初心者として removeItem / clear で意識してほしいこと

最後に、頭に置いておいてほしいポイントを整理します。

removeItem
特定のキーだけ消す。存在しないキーでもエラーにならない。
「一部だけ消したいとき」に使う（ログアウト時のトークン削除など）。

clear
そのストレージに入っているものを全部消す。
「このストレージはこのアプリ専用」と言えるときに使うと安全。
他のコードも同じストレージを使っている場合は注意。

設計として大事なのは、

どのタイミングで、どのデータを残し、どのデータを消すか
自分のアプリが使っているキーを意識しているか
「とりあえず全部消す」ではなく、「必要なものだけ消す」発想を持てているか

という視点です。

練習としては、
小さなアプリを作って、

ログアウトボタン → 認証情報だけ removeItem
設定リセットボタン → 設定関連のキーだけ removeItem
アプリ完全リセットボタン → clear（または自分のキーだけ総 removeItem）

といった「消す設計」を自分で考えてみると、
ストレージ系 API を“ただ使う”から、“設計して使う”感覚に一歩近づけます。

スポンサーリンク
タイトルとURLをコピーしました