Pytanie Jak wykryć, czy przeglądarka obsługuje HTML5 Local Storage


Poniższy kod ostrzega ls exist w IE7:

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

IE7 tak naprawdę nie obsługuje lokalnej pamięci masowej, ale nadal ostrzega, że ​​tak. Być może dlatego, że używam IE9 w przeglądarce IE7 i trybach dokumentów za pomocą narzędzia programistycznego IE9. A może to tylko zły sposób na sprawdzenie, czy LS jest obsługiwany. Jaka jest właściwa droga?

Również nie chcę używać Modernizr, ponieważ używam tylko kilku funkcji HTML5, a wczytanie dużego skryptu nie jest warte po prostu wykrycia wsparcia dla tych kilku rzeczy.


76
2018-06-26 19:14


pochodzenie


Możliwy duplikat Sprawdź dostępność pliku HTML 5 localStorage - BuZZ-dEE


Odpowiedzi:


Nie musisz używać modernizr, ale możesz użyć ich metody, aby wykryć, jeśli localStorage jest wspierany

modernizr w github
test na 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;
    }
});

zaktualizowane o aktualny kod źródłowy


88
2018-06-26 19:18



Dodaj var mod = "test"; przed blokiem try-catch, w przeciwnym razie zawsze zawiedzie, ponieważ mod jest tam niezdefiniowany. - Mahn
Masz rację. Właśnie skopiowałem źródło z modernizatora i powoływałem się na jego poprawność ... - Andreas
może to zawieść, jeśli nie ma już miejsca w pamięci lokalnej. - Patrick
@Patrick sposób być tym facetem ...: P - contactmatt
Szczerze mówiąc, to nie jest najlepszy test, bo co, jeśli lokalna pamięć jest po prostu pełna? localStorage może być obsługiwany, ale tylko w stanie, w którym nie możesz go dodać. - DemiImp


if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }

36
2018-06-26 19:15



typeof(Storage) !== void(0) jest lepszym rozwiązaniem - Petja Touru
@petjato powinno tak być if (Storage !== void(0)) - Andrew Anthony Gerst
typeof nie jest funkcją, jest operatorem językowym. dlaczego nawias? - r3wt
Wydaje się, że jest to niewielki wariant tego, co można znaleźć w W3Schools stronie internetowej. To także nie działa. - fujiiface
Tryb przeglądania prywatnego w Safari nie obsługuje zapisu do localStorage, ale ta kontrola zwraca true dla tego przypadku. Rozwiązanie autorstwa Andreasa zajmuje się tą sprawą. - Deepak Joy


Również nie chcę używać Modernizr, ponieważ używam tylko kilku HTML5   funkcje i ładowanie dużego skryptu nie są warte po prostu wykrycia   wsparcie dla tych kilku rzeczy.

Aby zmniejszyć rozmiar pliku Modernizr, dostosuj plik pod adresem http://modernizr.com/download/ aby dopasować się do twoich potrzeb. Wersja Modernizr dostępna tylko w wersji LocalStorage wynosi 1,55 KB.


15
2018-04-01 14:16



Cześć, witamy w Stack Overflow! To naprawdę brzmi bardziej jak powinno być komentarz raczej niż odpowiedźna oryginalne pytanie. Rozumiem, że nie możesz jeszcze komentować, ale osiągasz 50 rozpustnik nie jest trudne ani czasochłonne. - Jesse
możesz to zrobić - do zrobienia jeszcze tylko 9 powtórzeń! OK, przegłosowałem, więc teraz masz 51 - Simon_Weaver
Zdaję sobie sprawę, że 1.55kb to nic, ale nadal wydaje się przesadą, by sprawdzić obsługę LocalStorage. - Tyler Biscoe


Ta funkcja działa dobrze:

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

Źródło: www.diveintohtml5.info


13
2017-08-15 10:02



Minęło dużo czasu. i wiem, to najlepsza odpowiedź, od kiedy przeczytałem książkę. Moje pytanie brzmi: dlaczego sprawdzamy jedną rzecz dwukrotnie, aby być NULL? - Ali Saberi
Myślę, że pierwszy 'localStorage' in window sprawdza, czy właściwość istnieje w obiekcie okna (nie jest "niezdefiniowana"), a druga window['localStorage'] !== null sprawdza, czy ta właściwość nie ma wartości NULL. - juanra
Nie można tego osiągnąć, po prostu wykonując nie ścisłą kontrolę równości okna ['localStorage'] == null? Obejmuje to zarówno niezdefiniowaną, jak i zerową kontrolę. - Triynko
Cóż, tak sądzę. Jeśli zaznaczysz'window ['something'] == null', wynik będzie "prawdziwy", nawet jeśli jest niezdefiniowany. Niemniej jednak wybrałbym pierwszą metodę dla jasności. - juanra


Próbować window.localStorage!==undefined:

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

Możesz także użyć typeof window.localStorage!=="undefined", ale powyższe stwierdzenie już to robi


8
2018-06-26 19:15



Safari może mieć localStorage, ale rzuca błąd, jeśli jest w trybie prywatnym (QuotaExceededError), więc tr / catch jest najlepszą opcją IMHO - Endless
Hm, nie wiedziałem o tym. Ale to tylko wyrzuca ten błąd, gdy próbuje pisać rzeczy, prawda? - Danilo Valente
tak to jest poprawne - Endless
W rzeczywistości samo sprawdzenie atrybutu window.localStorage (jak pokazano w tym przykładzie) spowoduje błąd, gdy Safari jest skonfigurowany do blokowania plików cookie i danych witryny. Konkretnie: SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent. - Aaronius
Tryb przeglądania prywatnego w Safari nie obsługuje zapisu do localStorage, ale ta kontrola zwraca true dla tego przypadku. Rozwiązanie autorstwa Andreasa zajmuje się tą sprawą. - Deepak Joy


Nie znalazłem tego w odpowiedziach, ale myślę, że dobrze jest wiedzieć, że można łatwo użyć wanilowego JS lub jQuery do takich prostych testów, a podczas gdy Modernizr bardzo pomaga, istnieją bez niego czyste rozwiązania.

Jeśli użyjesz jQuery, możesz to zrobić:

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

Lub z czystą wanilią JavaScript:

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

Następnie wystarczy wykonać test IF, aby przetestować wsparcie:

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

Cały pomysł polega na tym, że gdy potrzebujesz funkcji JavaScript, najpierw przetestuj obiekt nadrzędny, a następnie metody, których używa twój kod.


6
2017-07-26 20:52





Spróbuj catch wykona zadanie:

    try{
       localStorage.setItem("name",name.value);
       localStorage.setItem("post",post.value);
       }
    catch(e){
       alert(e.message);    
       }

3
2017-08-10 09:02