ブラウザがHTML5ローカルストレージをサポートしているかどうかを検出する方法

84

ls existIE7の次のコードアラート：

if(window.localStorage) {
    alert('ls exists');
} else {
    alert('ls does not exist');
}

IE7は実際にはローカルストレージをサポートしていませんが、それでもサポートしていることを警告しています。おそらくこれは、IE7ブラウザーでIE9を使用しており、IE9開発者ツールを使用してドキュメントモードを使用しているためです。あるいは、これはLSがサポートされているかどうかをテストするための間違った方法かもしれません。正しい方法は何ですか？

また、私はいくつかのHTML5機能しか使用しておらず、大きなスクリプトをロードすることは、それらのいくつかのサポートを検出するだけの価値がないため、Modernizrを使用したくありません。

javascript  html 
— TK123
ソース
— BuZZ-dEE 2017年

回答:

99

modernizrを使用する必要はありませんが、それらのメソッドを使用して、localStorageサポートされているかどうかを検出できます。

githubテストでのmodernizr
localStorage

// In FF4, if disabled, window.localStorage should === null.

// Normally, we could not test that directly and need to do a
//   `('localStorage' in window) && ` test first because otherwise Firefox will
//   throw bugzil.la/365772 if cookies are disabled

// Also in iOS5 & Safari Private Browsing mode, attempting to use localStorage.setItem
// will throw the exception:
//   QUOTA_EXCEEDED_ERRROR DOM Exception 22.
// Peculiarly, getItem and removeItem calls do not throw.

// Because we are forced to try/catch this, we'll go aggressive.

// Just FWIW: IE8 Compat mode supports these features completely:
//   www.quirksmode.org/dom/html5.html
// But IE8 doesn't support either with local files

Modernizr.addTest('localstorage', function() {
    var mod = 'modernizr';
    try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
    } catch(e) {
        return false;
    }
});

現在のソースコードで更新

— アンドレアス
ソース
3
var mod = "test";try-catchブロックの前に追加します。そうしないと、modが定義されていないため、これは常に失敗します。
— Mahn 2013
5
ローカルストレージに空き容量がない場合、これは失敗する可能性があります。
— パトリック
1
正直なところ、これは最良のテストではありません。ローカルストレージがいっぱいになった場合はどうなるでしょうか。localStorageはサポートできますが、追加できない状態です。
— demiImp 2016年
2
これにより、他のウィンドウでストレージイベントが発生することに注意してください
— Mark Swardstrom 2017年
2
@ Andreas-はい、わかっています。このテストは、ローカルストレージを変更します。それを望まず、サポートをテストしたいだけの場合は、他のソリューションの方が適している可能性があります。
— Mark Swardstrom 2017年
44 
if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }
— ブランドンフェラーラ
ソース
7
typeof(Storage) !== void(0)より良い解決策です
— Petja 2014年
2
@petjato実際にはそうあるべきですif (Storage !== void(0))
— Andrew
4
typeof関数ではなく、言語演算子です。なぜ括弧ですか？
— r3wt 2015年
1
これは、W3SchoolsのWebサイトにあるもののわずかな変形のようです。また、機能していないようです。
— fujiiface 2015
2
SafariのプライベートブラウジングモードはlocalStorageへの書き込みをサポートしていませんが、このチェックはその場合にtrueを返します。Andreasによるソリューションがこのケースを処理します。
— ディーパックジョイ
16

この関数は正常に機能します。

function supports_html5_storage(){
    try {
        return 'localStorage' in window && window['localStorage'] !== null;
    } catch(e) {
        return false;
    }
}

出典：www.diveintohtml5.info

— フアンラ
ソース
1
久しぶりです。私が本を読んだので、それが最良の答えだと私は知っています。私の質問では、なぜ1つのことを2回チェックしてNULLになるのですか？
— Ali Saberi 2016
最初'localStorage' in windowはプロパティがウィンドウオブジェクトに存在する（「未定義」ではない）window['localStorage'] !== nullことを確認し、2番目はそのプロパティがNULLでないことを確認すると思います。
— juanra 2016
1
window ['localStorage'] == nullの非厳密な等価性チェックを実行するだけでは、それを達成できませんでしたか？これは、未定義のチェックとnullチェックの両方をカバーします。
— Triynko 2016
まあ、そうだと思います。「window ['something'] == null」をチェックすると、未定義の場合でも結果は「true」になります。それでも、わかりやすくするために最初の方法を選択します。
— juanra 2016年
15

また、私はいくつかのHTML5機能しか使用しておらず、大きなスクリプトをロードすることは、それらのいくつかのサポートを検出するだけの価値がないため、Modernizrを使用したくありません。

Modernizrのファイルサイズを小さくするには、http：//modernizr.com/download/でファイルをカスタマイズしてニーズに合わせます。ModernizrのlocalStorageのみのバージョンは1.55KBで提供されます。

— スティーブA
ソース
3
こんにちは、Stack Overflowへようこそ！これは、元の質問への回答ではなく、コメントである必要があるように聞こえます。私はあなたがまだコメントすることはできません実現が、50に到達する担当者は、ハードや時間がかかるではありません。
— ジェシー
1
あなたはそれを行うことができます-あと9人の担当者だけです！わかりました、私は賛成したので、今あなたは51を持っています
— Simon_Weaver 2015
1.55kbは何もないことに気づきましたが、それでもlocalStorageのサポートを確認するだけではやり過ぎのようです。
— タイラービスコー2017
9

試してみてくださいwindow.localStorage!==undefined：

if(window.localStorage!==undefined){
    //Do something
}else{
    alert('Your browser is outdated!');
}

を使用することもできますtypeof window.localStorage!=="undefined"が、上記のステートメントはすでにそれを行っています

— ダニーロ・バレンテ
ソース
2
SafariはのlocalStorageを持っていますが、TR /キャッチが最良の選択肢の私見ですので、プライベートモード（QuotaExceededError）であれば、エラーを唱えてもよい
— エンドレス
1
うーん、知らなかった。しかし、それは何かを書き込もうとしたときにそのエラーをスローするだけですよね？
— Danilo Valente 2014
1
実際には、（この例に示すように）window.localStorage属性をチェックするだけで、SafariがCookieとWebサイトデータをブロックするように設定されている場合にエラーがスローされます。具体的には：SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
— Aaronius 2015年
SafariのプライベートブラウジングモードはlocalStorageへの書き込みをサポートしていませんが、このチェックはその場合にtrueを返します。Andreasによるソリューションがこのケースを処理します。
— ディーパックジョイ
7

回答には表示されませんでしたが、このような単純なテストにはバニラJSまたはjQueryを簡単に使用できることを知っておくとよいと思います。また、Modernizrは大いに役立ちますが、それがなくてもクリーンなソリューションがあります。

jQueryを使用する場合は、次のことができます。

var _supportsLocalStorage = !!window.localStorage
    && $.isFunction(localStorage.getItem)
    && $.isFunction(localStorage.setItem)
    && $.isFunction(localStorage.removeItem);

または、純粋なVanilla JavaScriptを使用します：

var _supportsLocalStorage = !!window.localStorage
    && typeof localStorage.getItem === 'function'
    && typeof localStorage.setItem === 'function'
    && typeof localStorage.removeItem === 'function';

次に、IFを実行してサポートをテストします。

if (_supportsLocalStorage) {
    console.log('ls is supported');
    alert('ls is supported');
}

したがって、JavaScript機能が必要な場合は常に、最初に親オブジェクトをテストし、次にコードが使用するメソッドをテストするというのが全体的な考え方です。

— Ovi Trif
ソース
3

キャッチを試してみてください：

    try{
       localStorage.setItem("name",name.value);
       localStorage.setItem("post",post.value);
       }
    catch(e){
       alert(e.message);    
       }
— Mohit Verma
ソース
1

試してみてください： 

if(typeof window.localStorage != 'undefined') {
}
— ErJab
ソース
1

Andreaの回答を変更してゲッターを追加すると、使いやすくなります。以下であなたは単に言う：if(ls)...

  var ls =  {
    get: function () { 
      var test = 'test';
      try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
      } catch(e) {
        return false;
      }
    }
  };


var ls =  {
  get: function () { 
    var test = 'test';
    try {
      localStorage.setItem(test, test);
      localStorage.removeItem(test);
      return true;
    } catch(e) {
      return false;
    }
  }
};

function script(){
  if(ls){
    alert('Yes');
  } else {
    alert('No');
  }
}
<button onclick="script()">Local Storage Support?</button>
スニペットを展開

— ロニーロイストン
ソース
0

パーティーに少し遅れていることはわかっていますが、いくつかの便利な関数を作成して、「manage_storage.js」という名前のファイルに入れました。彼らが私によく役立ったのと同じくらいあなたたちに役立つことを願っています。

覚えておいてください:(この質問に答える）あなたが探している関数はですisLclStorageAllowed。

だから、これ以上苦労することなく、ここに私のコードがあります：

/* Conditional Function checks a web browser for 'session storage' support. [BEGIN] */

if (typeof isSessStorageAllowed !== 'function')
    {
        function isSessStorageAllowed()
            {
                if (!!window.sessionStorage && typeof sessionStorage.getItem === 'function' && typeof sessionStorage.setItem === 'function' && typeof sessionStorage.removeItem === 'function')
                    {
                        try
                            {
                                var cur_dt = new Date();
                                var cur_tm = cur_dt.getTime();
                                var ss_test_itm_key = 'ss_test_itm_' + String(cur_tm);
                                var ss_test_val = 'ss_test_val_' + String(cur_tm);

                                sessionStorage.setItem(ss_test_itm_key, String(ss_test_val));

                                if (sessionStorage.getItem(ss_test_itm_key) == String(ss_test_val))
                                    {
                                        return true;
                                    }
                                else
                                    {
                                        return false;
                                    };

                                sessionStorage.removeItem(ss_test_itm_key);
                            }
                        catch (exception)
                            {
                                return false;
                            };
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'session storage' support. [END] */

/* Conditional Function checks a web browser for 'local storage' support. [BEGIN] */

if (typeof isLclStorageAllowed !== 'function')
    {
        function isLclStorageAllowed()
            {
                if (!!window.localStorage && typeof localStorage.getItem === 'function' && typeof localStorage.setItem === 'function' && typeof localStorage.removeItem === 'function')
                    {
                        try
                            {
                                var cur_dt = new Date();
                                var cur_tm = cur_dt.getTime();
                                var ls_test_itm_key = 'ls_test_itm_' + String(cur_tm);
                                var ls_test_val = 'ls_test_val_' + String(cur_tm);

                                localStorage.setItem(ls_test_itm_key, String(ls_test_val));

                                if (localStorage.getItem(ls_test_itm_key) == String(ls_test_val))
                                    {
                                        return true;
                                    }
                                else
                                    {
                                        return false;
                                    };

                                localStorage.removeItem(ls_test_itm_key);
                            }
                        catch (exception)
                            {
                                return false;
                            };
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'local storage' support. [END] */

/* Conditional Function checks a web browser for 'web storage' support. [BEGIN] */

/* Prerequisites: 'isSessStorageAllowed()', 'isLclStorageAllowed()' */

if (typeof isWebStorageAllowed !== 'function')
    {
        function isWebStorageAllowed()
            {
                if (isSessStorageAllowed() === true && isLclStorageAllowed() === true)
                    {
                        return true;
                    }
                else
                    {
                        return false;
                    };
            };
    };

/* Conditional Function checks a web browser for 'web storage' support. [END] */
— ジェームズアンダーソンジュニア
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.