So erkennen Sie, ob der Browser HTML5 Local Storage unterstützt

84

Die folgenden Code-Warnungen ls existin IE7:

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

IE7 unterstützt lokalen Speicher nicht wirklich, dies warnt jedoch weiterhin. Vielleicht liegt das daran, dass ich IE9 im IE7-Browser und im Dokumentmodus mit dem IE9-Entwicklertool verwende. Oder vielleicht ist dies nur der falsche Weg, um zu testen, ob LS unterstützt wird. Was ist der richtige Weg?

Außerdem möchte ich Modernizr nicht verwenden, da ich nur einige wenige HTML5-Funktionen verwende und das Laden eines großen Skripts sich nicht lohnt, nur um die Unterstützung für diese wenigen Dinge zu erkennen.

javascript  html 
— TK123
quelle
Mögliches Duplikat von Check for HTML 5 localStorage
— BuZZ-dEE

Antworten:

99

Sie müssen modernizr nicht verwenden, aber Sie können ihre Methode verwenden, um festzustellen, ob dies localStorageunterstützt wird

modernizr bei github
test fürlocalStorage

// 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;
    }
});

aktualisiert mit aktuellem Quellcode

— Andreas
quelle
3
Fügen Sie var mod = "test";vor dem try-catch-Block hinzu, andernfalls schlägt dies immer fehl, da mod dort undefiniert ist.
— Mahn
5
Dies kann fehlschlagen, wenn im lokalen Speicher kein Speicherplatz mehr vorhanden ist.
— Patrick
1
Ehrlich gesagt ist dies nicht der beste Test, denn was ist, wenn der lokale Speicher nur voll ist? localStorage kann unterstützt werden, jedoch nur in einem Zustand, in dem Sie nichts hinzufügen können.
— DemiImp
2
Beachten Sie, dass dies Speicherereignisse in anderen Fenstern
— auslöst
2
@Andreas - Ja, ich weiß. Dieser Test ändert den lokalen Speicher. Wenn Sie dies nicht möchten und nur auf Support testen möchten, sind andere Lösungen möglicherweise die bessere Wahl.
— Mark Swardstrom
44 
if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }
— Brandon Ferrara
quelle
7
typeof(Storage) !== void(0)ist bessere Lösung
— Petja
2
@petjato sollte es eigentlich seinif (Storage !== void(0))
— Andrew
4
typeofist keine Funktion, sondern ein Sprachoperator. warum die Klammer?
— r3wt
1
Dies scheint eine geringfügige Variante dessen zu sein, was auf der W3Schools- Website zu finden ist . Es scheint auch nicht zu funktionieren.
— Fujiiface
2
Der private Browsermodus in Safari unterstützt das Schreiben in localStorage nicht, aber diese Prüfung gibt für diesen Fall true zurück. Die Lösung von Andreas behandelt diesen Fall.
— Deepak Joy
16

Diese Funktion funktioniert gut:

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

Quelle: www.diveintohtml5.info

— Juanra
quelle
1
Es ist lange her. und ich weiß, es ist die beste Antwort, seit ich das Buch gelesen habe. Durch meine Frage ist, warum wir eine Sache zweimal überprüfen, um NULL zu sein?
— Ali Saberi
Ich denke, die erste 'localStorage' in windowprüft, ob die Eigenschaft im Fensterobjekt existiert (ist nicht 'undefiniert'), und die zweite window['localStorage'] !== nullprüft, ob diese Eigenschaft nicht NULL ist.
— Juanra
1
Könnte dies nicht erreicht werden, indem einfach eine nicht strenge Gleichheitsprüfung von window ['localStorage'] == null durchgeführt wird? Dies umfasst sowohl die undefinierte als auch die Nullprüfung.
— Triynko
Naja ich glaube schon. Wenn Sie "Fenster ['etwas'] == null" aktivieren, ist das Ergebnis "wahr", auch wenn es undefiniert ist. Trotzdem würde ich aus Gründen der Klarheit die erste Methode wählen.
— Juanra
15

Außerdem möchte ich Modernizr nicht verwenden, da ich nur einige wenige HTML5-Funktionen verwende und das Laden eines großen Skripts sich nicht lohnt, nur um die Unterstützung für diese wenigen Dinge zu erkennen.

Um die Größe der Modernizr-Datei zu verringern , passen Sie die Datei unter http://modernizr.com/download/ an Ihre Bedürfnisse an. Eine Nur-Local-Storage-Version von Modernizr ist mit 1,55 KB verfügbar.

— Steve A.
quelle
3
Hallo, willkommen bei Stack Overflow! Das klingt wirklich eher so, als ob es eher ein Kommentar als eine Antwort auf die ursprüngliche Frage sein sollte. Mir ist klar, dass Sie noch keinen Kommentar abgeben können, aber das Erreichen von 50 Wiederholungen ist nicht schwer oder zeitaufwändig.
— Jesse
1
Sie können es tun - nur noch 9 Wiederholungen! ok ich habe gestimmt so jetzt hast du 51
— Simon_Weaver
Mir ist klar, dass 1,55 KB nichts sind, aber es scheint immer noch übertrieben, nur um die Unterstützung von localStorage zu überprüfen.
— Tyler Biscoe
9

Versuchen Sie window.localStorage!==undefined:

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

Sie können auch verwenden typeof window.localStorage!=="undefined", aber die obige Aussage macht es bereits

— Danilo Valente
quelle
2
Safari hat möglicherweise localStorage, gibt aber im privaten Modus (QuotaExceededError) einen Fehler aus, sodass tr / catch die beste Option ist. IMHO
— Endless
1
Hm, das wusste ich nicht. Aber dieser Fehler wird nur ausgelöst, wenn versucht wird, etwas zu schreiben, oder?
— Danilo Valente
1
Tatsächlich führt die bloße Überprüfung des Attributs window.localStorage (wie in diesem Beispiel gezeigt) zu einem Fehler, wenn Safari so eingerichtet ist, dass Cookies und Website-Daten blockiert werden. Im Einzelnen:SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
— Aaronius
Der private Browsermodus in Safari unterstützt das Schreiben in localStorage nicht, aber diese Prüfung gibt für diesen Fall true zurück. Die Lösung von Andreas behandelt diesen Fall.
— Deepak Joy
7

Ich habe es in den Antworten nicht gesehen, aber ich denke, es ist gut zu wissen, dass Sie Vanilla JS oder jQuery einfach für so einfache Tests verwenden können, und während Modernizr viel hilft, gibt es saubere Lösungen ohne es.

Wenn Sie jQuery verwenden , können Sie Folgendes tun:

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

Oder mit reinem Vanilla JavaScript :

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

Dann würden Sie einfach eine IF durchführen, um den Support zu testen:

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

Die ganze Idee ist also, dass Sie, wann immer Sie JavaScript-Funktionen benötigen, zuerst das übergeordnete Objekt und dann die von Ihrem Code verwendeten Methoden testen.

— Ovi Trif
quelle
3

Versuchen Sie fangen wird den Job machen:

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

Versuchen: 

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

   alert('localStorage is supported');
   window.localStorage.setItem("whatever", "string value");

}
— Darren
quelle
Beste Antwort hier sprunghaft
— Alex Bennett
1

Das Ändern der Antwort von Andrea, um einen Getter hinzuzufügen, erleichtert die Verwendung. Mit dem Folgenden sagen Sie einfach: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>
Erweitern Sie das Snippet

— Ronnie Royston
quelle
0

Ich weiß, dass ich etwas spät zur Party komme, aber ich habe ein paar nützliche Funktionen, die ich mir ausgedacht und in eine Datei mit dem Namen 'manage_storage.js' geworfen habe. Ich hoffe, sie sind für euch genauso nützlich, wie sie mir gut gedient haben.

Denken Sie daran: Die gesuchte Funktion (die diese Frage beantwortet) ist isLclStorageAllowed.

Also ohne weiteres hier ist mein Code:

/* 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] */
— James Anderson Jr.
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.