web-dev-qa-db-fra.com

Comment détecter si un navigateur prend en charge le stockage local HTML5

Le code suivant alerte ls exist dans IE7:

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

IE7 ne prend pas vraiment en charge le stockage local, mais cela l'alerte toujours. C'est peut-être parce que j'utilise IE9 dans les modes navigateur et document IE7 à l'aide de l'outil de développement IE9. Ou peut-être que c'est simplement la mauvaise façon de vérifier si LS est pris en charge. Quelle est la bonne façon?

De plus, je ne souhaite pas utiliser Modernizr, car je n'utilise que quelques fonctionnalités HTML5 et le chargement d'un script volumineux ne vaut pas la peine de détecter la prise en charge de ces quelques éléments.

javascripthtmlhtml5
78
TK123

Vous n'êtes pas obligé d'utiliser modernizr, mais vous pouvez utiliser leur méthode pour détecter si localStorage est supporté

modernizr at github
test for 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;
    }
});

mis à jour avec le code source actuel

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

De plus, je ne veux pas utiliser Modernizr puisque je n'utilise que quelques HTML5 Les fonctionnalités et le chargement d'un script volumineux ne valent pas la peine d'être détectés soutien pour ces quelques choses.

Pour réduire la taille du fichier Modernizr, personnalisez-le à l’adresse http://modernizr.com/download/ pour répondre à vos besoins. Une version de Modernizr réservée au stockage local est proposée à 1,55 Ko.

15
Steve A

Cette fonction fonctionne bien:

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

Source: www.diveintohtml5.info

14
juanra

Essayez window.localStorage!==undefined:

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

Vous pouvez également utiliser typeof window.localStorage!=="undefined", mais l'instruction ci-dessus le fait déjà

8
Danilo Valente

Je ne l'ai pas vu dans les réponses, mais je pense qu'il est bon de savoir que vous pouvez facilement utiliser Vanilla JS ou jQuery pour des tests aussi simples. Bien que Modernizr aide beaucoup, il existe des solutions propres sans cela.

Si vous utilisez jQuery , vous pouvez faire:

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

Ou, avec de la vanille pure JavaScript :

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

Ensuite, vous feriez simplement un IF pour tester le support:

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

Donc, l'idée est que chaque fois que vous avez besoin des fonctionnalités JavaScript, vous devez d'abord tester l'objet parent, puis les méthodes utilisées par votre code.

7
Ovi Trif

Essayez catch fera le travail:

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

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

}
1
Darren

Essayer: 

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