【Web Storage】localStorageが使えるかどうかの簡単な判定方法

Webアプリでサーバーを用意せずデータ保存したいとき・・・

便利なのが Web Storage( localStorage )というAPI

クッキーを使うより、大容量&簡単に使えるのが利点。

でも一部だと使えないブラウザもあるからチェックは大事です。

ということで自分への覚え書きとして、
JavaScriptで localStoage が使えるかどうかの判定方法をまとめました。

まず localStoage(Web Storage)って何ゾ?

これはキーと値のペアを簡単に保存できるAPIのこと

今までの cookie より何倍何十倍も楽に扱うことができます。

 

そしてこの Web Storage 、次の2種類。

  • sessionStorage
    セッション中 (同一のページをブラウザーを開いている間) に使用可能。生成元ごとに区切られた保存領域で管理しているらしい
  • localStorage
    本当にブラウザローカルに保存できるストレージ。ブラウザを閉じたり、再起動したとしても半永久的にデータ保存できる

半永久的に保存するなら localStoage を使うのが良さそう。

少しのデータしか保存できない cookie と違い、
本当にブラウザ自体にデータを保存できる感じで使いやすいです。

ちなみに基本的な使い方(setItem, getItem, etc...)

それでこの localStorage 、本当に使い方も楽。

今更説明するほどでもないけど、基本的な操作は次の3つを使うだけ です。

 

1.キーと値の保存

▼ 次のように setItem  メソッドを使う

 

2.キー名から値を取得

▼ 次のように getItem  メソッドを使う

 

3.キー名と値を削除する

▼ 次のように removeItem  メソッドを使う

 

たったこれだけ。今までのcookieよりも簡単ですね。

ちなみに直接 localStorage.nickname = 'pisuke';  とかもできます。

でもそれはしない方が安全!

▼ 参考:オブジェクトをmapとして使う落とし穴

上ページでも理由が書いてありますが、
変なバグを残さないためには setItem  とか getItem  を使うのが安全らしいです。

localStorage が使えるかどうかの2つの判定コード

それでココからが肝心な部分

どれだけ便利でもブラウザが対応してないと無意味です。

なので使えるか判定するコードを用途別に詳解します。

ここで紹介するやり方は、用途別に次の2つ

  • とりあえず localStorage が使えるか判定
  • 値の取得・変更・削除にすべて対応してるか判定

この2パターンでの判定コードは次みたいになります。

1.とりあえず localStorage が使えるか判定

その場合は単純。

次の数行のコードを書けばいいだけです。

このコードみたいに window.localStorage  と書くのも大事。

そうすればスコープとか気にせず、確実に判定することができます。

 

ただし、この関数は単純に次の判定をしてるだけです。

  • localStorageが存在しているかどうか
  • メソッドまで実装されてるかは調べてない

もっと厳密に調べたいなら、次コードの方が安全かもしれません。

2.完全に localStorage が使えるか判定する

例えば localStorage  はブラウザ側で無効化されてることもあります。

そういうイレギュラーな場合も含めて判定したい場合・・・

次のようなコードで判定が可能。

こういう感じ

ダミーのキー名と値を代入し、例外が発生しているか調べてるだけです。

 

もしスマートに書きたいなら、関数化するのも良いと思います。

▼ localStorageが使えるかどうか判定する関数

関数名とかは ゛もっとセンスのあるもの゛ に変更してください、、、

ここまでのまとめ

本当に localStorgae は便利。
DBに保存しなくていいデータなら、ソレで事足りるかもしれません。

でも対応ブラウザや有効かどうかのチェックは必須ですね。

ということで localStorage が使えるかどうかの判定方法でした。ではではバイバイ

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください