Come rilevare se il browser supporta l'archiviazione locale HTML5

85

I seguenti avvisi di codice ls existin IE7:

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

IE7 non supporta realmente l'archiviazione locale, ma questo avvisa comunque che lo fa. Forse questo è perché sto usando IE9 nel browser IE7 e le modalità documento utilizzando lo strumento di sviluppo IE9. O forse questo è solo il modo sbagliato per verificare se LS è supportato. Qual è il modo giusto?

Inoltre non voglio usare Modernizr poiché sto usando solo poche funzionalità HTML5 e il caricamento di uno script di grandi dimensioni non vale la pena solo per rilevare il supporto per quelle poche cose.

javascript  html 
— TK123
fonte
Possibile duplicato di Check for HTML 5 localStorage
— BuZZ-dEE

Risposte:

100

Non è necessario utilizzare modernizr, ma è possibile utilizzare il loro metodo per rilevare se localStorageè supportato

modernizr su github
test perlocalStorage

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

aggiornato con il codice sorgente corrente

— Andreas
fonte
3
Aggiungi var mod = "test";prima del blocco try-catch, altrimenti fallirà sempre poiché la mod non è definita lì.
— Mahn
5
questo potrebbe non riuscire se non è rimasto spazio nel localstorage.
— Patrick
1
Onestamente, questo non è il test migliore perché cosa succede se l'archiviazione locale è piena? localStorage può essere supportato, ma solo in uno stato in cui non è possibile aggiungere.
— DemiImp
2
Nota, questo attiverà gli eventi di archiviazione in altre finestre
— Mark Swardstrom
2
@Andreas - Sì, lo so. Questo test modifica la memoria locale. Se non vuoi che ciò accada e vuoi solo testare il supporto, altre soluzioni potrebbero essere una scelta migliore.
— Mark Swardstrom
45 
if(typeof Storage !== "undefined")
  {
  // Yes! localStorage and sessionStorage support!
  // Some code.....
  }
else
  {
  // Sorry! No web storage support..
  }
— Brandon Ferrara
fonte
7
typeof(Storage) !== void(0)è la soluzione migliore
— Petja
2
@petjato dovrebbe effettivamente essereif (Storage !== void(0))
— Andrew
4
typeofnon è una funzione, è un operatore linguistico. perché la parentesi?
— r3wt
1
Questa sembra essere una leggera variante di ciò che si trova sul sito Web di W3Schools . Inoltre non sembra funzionare.
— fujiiface
2
La modalità di navigazione privata in Safari non supporta la scrittura su localStorage, ma questo controllo restituisce true per quel caso. La soluzione di Andreas gestisce questo caso.
— Deepak Joy
16

Questa funzione funziona bene:

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

Fonte: www.diveintohtml5.info

— juanra
fonte
1
È passato molto tempo. e lo so, è la risposta migliore da quando ho letto il libro. Dalla mia domanda è perché stiamo controllando una cosa due volte per essere NULL?
— Ali Saberi
Penso che il primo 'localStorage' in windowcontrolli che la proprietà esista nell'oggetto finestra (non è 'undefined'), e il secondo window['localStorage'] !== nullcontrolla che quella proprietà non sia NULL.
— juanra
1
Non potrebbe essere ottenuto semplicemente eseguendo un controllo di uguaglianza non rigoroso di window ['localStorage'] == null? Ciò copre sia il controllo non definito che quello nullo.
— Triynko
Beh, credo di sì. Se controlli ´window ['qualcosa'] == null´, il risultato è "vero", anche quando non è definito. Tuttavia sceglierei il primo metodo per motivi di chiarezza.
— juanra
15

Inoltre non voglio usare Modernizr poiché sto usando solo poche funzionalità HTML5 e il caricamento di uno script di grandi dimensioni non vale la pena solo per rilevare il supporto per quelle poche cose.

Per ridurre le dimensioni del file Modernizr, personalizzare il file su http://modernizr.com/download/ in base alle proprie esigenze. Una versione solo localStorage di Modernizr arriva a 1,55 KB.

— Steve A
fonte
3
Ciao, benvenuto in Stack Overflow! Questo suona davvero più come dovrebbe essere un commento piuttosto che una risposta alla domanda originale. Mi rendo conto che non puoi ancora commentare, ma raggiungere 50 ripetizioni non è difficile né richiede tempo.
— Jesse
1
puoi farlo - mancano solo 9 ripetizioni in più! ok ho votato positivamente, quindi ora hai 51
— Simon_Weaver
Mi rendo conto che 1.55kb non è niente, ma sembra ancora eccessivo solo per controllare il supporto di localStorage.
— Tyler Biscoe
9

Prova window.localStorage!==undefined:

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

Puoi anche usare typeof window.localStorage!=="undefined", ma l'affermazione sopra lo fa già

— Danilo Valente
fonte
2
Safari potrebbe avere localStorage ma restituire un errore se in modalità privata (QuotaExceededError) quindi tr / catch è l'opzione migliore IMHO
— Endless
1
Hm, non lo sapevo. Ma genera quell'errore solo quando si cerca di scrivere cose, giusto?
— Danilo Valente
1
In realtà il semplice controllo dell'attributo window.localStorage (come mostrato in questo esempio) genererà un errore quando Safari è impostato per bloccare i cookie ei dati del sito web. Nello specifico:SecurityError: DOM Exception 18: An attempt was made to break through the security policy of the user agent.
— Aaronius
La modalità di navigazione privata in Safari non supporta la scrittura su localStorage, ma questo controllo restituisce true per quel caso. La soluzione di Andreas gestisce questo caso.
— Deepak Joy
7

Non l'ho visto nelle risposte, ma penso che sia bello sapere che puoi facilmente usare JS vanilla o jQuery per test così semplici, e mentre Modernizr aiuta molto, ci sono soluzioni pulite senza di esso.

Se usi jQuery , puoi fare:

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

Oppure, con puro JavaScript Vanilla :

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

Quindi, faresti semplicemente un IF per testare il supporto:

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

Quindi l'idea è che ogni volta che hai bisogno di funzionalità JavaScript, dovresti prima testare l'oggetto genitore e poi i metodi usati dal tuo codice.

— Ovi Trif
fonte
3

Prova a prendere farà il lavoro:

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

Provare: 

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

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

}
— Darren
fonte
La migliore risposta qui a passi da gigante
— alex bennett
1

Modificare la risposta di Andrea per aggiungere un getter ne semplifica l'utilizzo. Con quanto segue dici semplicemente: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>
Espandi lo snippet

— Ronnie Royston
fonte
0

So di essere un po 'in ritardo alla festa, ma ho alcune funzioni utili che ho preparato e inserito in un file chiamato "manage_storage.js". Spero che vi siano utili tanto quanto mi hanno servito bene.

Ricorda: la funzione che stai cercando (che risponde a questa domanda) è isLclStorageAllowed.

Quindi, senza ulteriori indugi, ecco il mio codice:

/* 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.
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.