Webアプリでサーバーを用意せずデータ保存したいとき・・・
便利なのが Web Storage（ localStorage ）というAPI
クッキーを使うより、大容量＆簡単に使えるのが利点。
でも一部だと使えないブラウザもあるからチェックは大事です。
ということで自分への覚え書きとして、
JavaScriptで localStoage が使えるかどうかの判定方法をまとめました。
このページの目次
まず localStoage（Web Storage）って何ゾ？
これはキーと値のペアを簡単に保存できるAPIのこと
今までの cookie より何倍何十倍も楽に扱うことができます。
そしてこの Web Storage 、次の２種類。
- sessionStorage
セッション中 (同一のページをブラウザーを開いている間) に使用可能。生成元ごとに区切られた保存領域で管理しているらしい
- localStorage
本当にブラウザローカルに保存できるストレージ。ブラウザを閉じたり、再起動したとしても半永久的にデータ保存できる
半永久的に保存するなら localStoage を使うのが良さそう。
少しのデータしか保存できない cookie と違い、
本当にブラウザ自体にデータを保存できる感じで使いやすいです。
ちなみに基本的な使い方（setItem, getItem, etc...）
それでこの localStorage 、本当に使い方も楽。
今更説明するほどでもないけど、基本的な操作は次の３つを使うだけ です。
１．キーと値の保存
▼ 次のように setItem メソッドを使う
|
1 2 |
/// キーと値ペアを保存 localStorage.setItem('nickname', 'pisuke'); |
２．キー名から値を取得
▼ 次のように getItem メソッドを使う
|
1 2 |
/// キー名から保存した値を取り出す var nickname = localStorage.getItem('nickname'); |
３．キー名と値を削除する
▼ 次のように removeItem メソッドを使う
|
1 2 |
/// キー名と値を削除する localStorage.removeItem('nickname'); |
たったこれだけ。今までのcookieよりも簡単ですね。
ちなみに直接 localStorage.nickname = 'pisuke'; とかもできます。
でもそれはしない方が安全！
▼ 参考：オブジェクトをmapとして使う落とし穴
上ページでも理由が書いてありますが、
変なバグを残さないためには
setItem とか
getItem を使うのが安全らしいです。
localStorage が使えるかどうかの２つの判定コード
それでココからが肝心な部分
どれだけ便利でもブラウザが対応してないと無意味です。
なので使えるか判定するコードを用途別に詳解します。
ここで紹介するやり方は、用途別に次の２つ
- とりあえず localStorage が使えるか判定
- 値の取得・変更・削除にすべて対応してるか判定
この２パターンでの判定コードは次みたいになります。
１．とりあえず localStorage が使えるか判定
その場合は単純。
次の数行のコードを書けばいいだけです。
|
1 2 3 4 5 6 7 8 |
if (typeof window.localStorage !== 'undefined'){ /// localStorageに対応済み console.log('やった！localStorage対応済み！'); } else{ /// localStorageには未対応 console.error('残念...localStorage未対応！'); } |
このコードみたいに window.localStorage と書くのも大事。
そうすればスコープとか気にせず、確実に判定することができます。
ただし、この関数は単純に次の判定をしてるだけです。
- localStorageが存在しているかどうか
- メソッドまで実装されてるかは調べてない
もっと厳密に調べたいなら、次コードの方が安全かもしれません。
２．完全に localStorage が使えるか判定する
例えば localStorage はブラウザ側で無効化されてることもあります。
そういうイレギュラーな場合も含めて判定したい場合・・・
次のようなコードで判定が可能。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
if (typeof localStorage !== 'undefined') { try { localStorage.setItem('dummy', '1'); if (localStorage.getItem('dummy') === '1') { localStorage.removeItem('dummy'); // OK!! 完全に localStorage が使える } else { // NG...localStorageが無効化(？)されてる } } catch(e) { // NG... localStorageの機能が使えない } } else { // NG... localStorage にそもそも未対応... } |
こういう感じ
ダミーのキー名と値を代入し、例外が発生しているか調べてるだけです。
もしスマートに書きたいなら、関数化するのも良いと思います。
▼ localStorageが使えるかどうか判定する関数
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function isLocalStorageAvlbl(){ if (typeof localStorage !== 'undefined') { try { localStorage.setItem('dummy', '1'); if (localStorage.getItem('dummy') === '1') { localStorage.removeItem('dummy'); return true; } else { return false; } } catch(e) { return false; } } else { return false; } } |
関数名とかは ゛もっとセンスのあるもの゛ に変更してください、、、
ここまでのまとめ
本当に localStorgae は便利。
DBに保存しなくていいデータなら、ソレで事足りるかもしれません。
でも対応ブラウザや有効かどうかのチェックは必須ですね。
ということで localStorage が使えるかどうかの判定方法でした。ではではﾊﾞｲﾊﾞｲ
