Jak wykryć, czy przeglądarka obsługuje pamięć lokalną HTML5


84

Poniższy kod ostrzega ls existw przeglądarce IE7:

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

IE7 tak naprawdę nie obsługuje lokalnego przechowywania, ale nadal ostrzega, że ​​tak. Być może dzieje się tak, ponieważ używam IE9 w przeglądarce IE7 i trybach dokumentów za pomocą narzędzia programistycznego IE9. A może jest to po prostu niewłaściwy sposób sprawdzenia, czy LS jest obsługiwane. Jaka jest właściwa droga?

Nie chcę też używać Modernizr, ponieważ używam tylko kilku funkcji HTML5, a ładowanie dużego skryptu nie jest warte tylko wykrycia obsługi tych kilku rzeczy.


Odpowiedzi:


99

Nie musisz używać modernizr, ale możesz użyć ich metody, aby wykryć, czy localStoragejest obsługiwana

modernizr at github
test dlalocalStorage

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

zaktualizowany o aktualny kod źródłowy


3
Dodaj var mod = "test";przed blokiem try-catch, w przeciwnym razie zawsze się to nie powiedzie, ponieważ mod jest tam niezdefiniowany.
Mahn,

5
może się to nie powieść, jeśli w lokalnym magazynie nie ma wolnego miejsca.
Patrick,

1
Szczerze mówiąc, to nie jest najlepszy test, ponieważ 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żna dodać.
DemiImp

2
Uwaga, spowoduje to uruchomienie zdarzeń przechowywania w innych oknach
Mark Swardstrom

2
@Andreas - Tak, wiem. Ten test modyfikuje pamięć lokalną. Jeśli nie chcesz, aby tak się stało i po prostu chcesz przetestować wsparcie, inne rozwiązania mogą być lepszym wyborem.
Mark Swardstrom

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

7
typeof(Storage) !== void(0)jest lepszym rozwiązaniem
Petja

2
@petjato powinno byćif (Storage !== void(0))
Andrew

4
typeofnie jest funkcją, jest operatorem języka. dlaczego nawias?
r3wt

1
Wydaje się, że jest to niewielki wariant tego, co można znaleźć na stronie internetowej W3Schools . Wydaje się, że to też nie działa.
fujiiface

2
Tryb przeglądania prywatnego w Safari nie obsługuje zapisywania do localStorage, ale to sprawdzenie zwraca prawdę w tym przypadku. Rozwiązanie autorstwa Andreasa rozwiązuje ten przypadek.
Deepak Joy

16

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


1
Minęło dużo czasu. i wiem, że to najlepsza odpowiedź, odkąd przeczytałem książkę. Moje pytanie brzmi: dlaczego dwa razy sprawdzamy jedną rzecz, aby była NULL?
Ali Saberi

Myślę, że pierwsza 'localStorage' in windowsprawdza, czy właściwość istnieje w obiekcie okna (nie jest „niezdefiniowana”), a druga window['localStorage'] !== nullsprawdza, czy ta właściwość nie ma wartości NULL.
juanra

1
Czy nie można tego osiągnąć po prostu wykonując nieścisłe sprawdzenie równości okna ['localStorage'] == null? Obejmuje to sprawdzenie niezdefiniowane i zerowe.
Triynko,

Cóż, tak myślę. Jeśli zaznaczysz ´window ['coś'] == null´, wynikiem jest „prawda”, nawet jeśli nie jest zdefiniowana. Niemniej jednak wybrałbym pierwszą metodę ze względu na przejrzystość.
juanra

15

Nie chcę też używać Modernizr, ponieważ używam tylko kilku funkcji HTML5, a ładowanie dużego skryptu nie jest warte tylko wykrycia obsługi tych kilku rzeczy.

Aby zmniejszyć rozmiar pliku Modernizr, dostosuj plik pod adresem http://modernizr.com/download/ do swoich potrzeb. Wersja programu Modernizr tylko do lokalnego magazynu ma rozmiar 1,55 KB.


3
Cześć, witaj w Stack Overflow! To naprawdę brzmi bardziej jak komentarz, a nie odpowiedź na pierwotne pytanie. Zdaję sobie sprawę, że nie możesz jeszcze komentować, ale osiągnięcie 50 powtórzeń nie jest trudne ani czasochłonne.
Jesse

1
możesz to zrobić - jeszcze tylko 9 powtórzeń! ok Głosowałem za, więc teraz masz 51
Simon_Weaver

Zdaję sobie sprawę, że 1.55kb to nic, ale nadal wydaje się przesadą, aby sprawdzić obsługę localStorage.
Tyler Biscoe

9

Spróbuj 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 oświadczenie już to robi


2
Safari może mieć localStorage, ale wyświetla błąd, jeśli jest w trybie prywatnym (QuotaExceededError), więc tr / catch jest najlepszą opcją IMHO
Endless

1
Hm, nie wiedziałem tego. Ale wyświetla ten błąd tylko podczas próby pisania rzeczy, prawda?
Danilo Valente

1
W rzeczywistości samo sprawdzenie atrybutu window.localStorage (jak pokazano w tym przykładzie) spowoduje wyświetlenie błędu, gdy Safari jest skonfigurowane do blokowania plików cookie i danych witryn internetowych. W szczególności: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 zapisywania do localStorage, ale to sprawdzenie zwraca prawdę w tym przypadku. Rozwiązanie autorstwa Andreasa rozwiązuje ten przypadek.
Deepak Joy

7

Nie widziałem tego w odpowiedziach, ale myślę, że dobrze jest wiedzieć, że do takich prostych testów można bez problemu użyć waniliowego JS lub jQuery, a chociaż Modernizr bardzo pomaga, to bez niego są czyste rozwiązania.

Jeśli używasz jQuery , możesz:

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

Lub z czystym Vanilla JavaScript :

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

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

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

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


3

Try catch załatwi sprawę:

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

1

Próbować:

if(typeof window.localStorage != 'undefined') {
}

1
if (window.localStorage){

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

}

Najlepsza odpowiedź tutaj skokowo
alex bennett

1

Modyfikacja odpowiedzi Andrei w celu dodania metody pobierającej ułatwia jej użycie. Poniżej po prostu powiesz: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

Wiem, że jestem trochę spóźniony na imprezę, ale mam kilka przydatnych funkcji, które przygotowałem i wrzuciłem do pliku o nazwie „manage_storage.js”. Mam nadzieję, że są dla was tak samo przydatne, jak dobrze mi służyły.

Pamiętaj: funkcja, której szukasz (która odpowiada na to pytanie) to isLclStorageAllowed.

Więc bez dalszych ceregieli, oto mój kod:

/* 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] */
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.