HTML5のlocalStorageでキーが存在するかどうかを確認する方法

HTML5のlocalStorageでキーが存在するかどうかを確認する方法

Webアプリケーションを開発していると、ブラウザのlocalStorageに特定のキーが保存されているかどうかを事前に確認したい場面が多くあります。この記事では、JavaScriptでlocalStorage内のキー存在を判定する代表的な2つの方法を、コード例とともにわかりやすく解説します。

方法1：getItem()メソッドでnullチェックを行う

getItem(key)メソッドは、引数としてキー名を1つ受け取り、そのキーに関連付けられた値を返します。指定したキーがストレージ内に存在していれば対応する値が取得でき、存在しない場合はnullが返されるという仕組みです。

この特性を利用して、戻り値がnullかどうかを比較することで、キーの有無を簡単に判定できます。

if (localStorage.getItem("user") === null) {
    // キー「user」が存在しない場合の処理
}

なお、厳密等価演算子（===）を使ってnullと比較することで、意図しない型変換による誤判定を防ぐことができます。

方法2：in演算子でキーの存在を直接確認する

もうひとつの方法として、JavaScriptのin演算子を使うやり方があります。こちらはキーがlocalStorageオブジェクト内に存在するかどうかを真偽値で直接判定できるため、より直感的で読みやすいコードになります。

if ("user" in localStorage) {
    alert('yes'); // キーが存在する場合
} else {
    alert('no'); // キーが存在しない場合
}

まとめ

localStorageのキー存在チェックには、getItem()のnullチェックとin演算子の2つの方法があります。値を取得しながら判定したい場合はgetItem()、単純に存在確認だけを行いたい場合はin演算子を使うと、目的に応じて使い分けができます。どちらの方法もブラウザ標準でサポートされているため、追加のライブラリなしですぐに利用可能です。