Vérifier si localStorage est disponible

Question

Je sais qu'il y a eu beaucoup de questions sur le fait de vérifier pour localStorage mais que se passe-t-il si quelqu'un le désactive manuellement dans son navigateur ? Voici le code que j'utilise pour vérifier :

localStorage.setItem('mod', 'mod');
if (localStorage.getItem('mod') != null){
  alert ('yes');
  localStorage.removeItem('mod');
} else {
  alert ('no');
}

Une fonction simple et qui fonctionne. Mais si j'entre dans les paramètres de Chrome et que je choisis l'option "Ne pas sauvegarder les données" (je ne me souviens pas exactement comment elle s'appelle), lorsque j'essaie d'exécuter cette fonction, je n'obtiens rien d'autre que Uncaught Error: SecurityError: DOM Exception 18 . Existe-t-il un moyen de vérifier si la personne l'a complètement désactivé ?

MISE À JOUR : C'est la deuxième fonction que j'ai essayée et je n'obtiens toujours pas de réponse (alerte).

try {
  localStorage.setItem('name', 'Hello World!');
} catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
   alert('Quota exceeded!');
  }
}

Answer 1

Utilice Modernizr (vous pourriez vouloir changer le nom de ma fonction pour quelque chose de mieux) :

function lsTest() {
  var test = 'test';
  try {
    localStorage.setItem(test, test);
    localStorage.removeItem(test);
    return true;
  } catch (e) {
    return false;
  }
}

var elem = document.getElementById('status');

if (lsTest()) {
  elem.innerHTML += 'available.';
} else {
  elem.innerHTML += 'unavailable.';
}

Elle n'est pas aussi concise que d'autres méthodes, mais c'est parce qu'elle est conçue pour maximiser la compatibilité.

• source originale : https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage.js
• exemple de travail : http://jsfiddle.net/6sm54/2/

Answer 2

Je vérifierais que localStorage est défini avant toute action qui en dépend :

if (typeof localStorage !== 'undefined') {
    var x = localStorage.getItem('mod');
} else {
    // localStorage not defined
}

UPDATE :

Si vous avez besoin de valider que la fonction existe et qu'elle n'est pas non plus désactivée, vous devez utiliser une approche plus sûre. Pour être parfaitement sûr :

if (typeof localStorage !== 'undefined') {
    try {
        localStorage.setItem('feature_test', 'yes');
        if (localStorage.getItem('feature_test') === 'yes') {
            localStorage.removeItem('feature_test');
            // localStorage is enabled
        } else {
            // localStorage is disabled
        }
    } catch(e) {
        // localStorage is disabled
    }
} else {
    // localStorage is not available
}

Answer 3

La détection des caractéristiques du stockage local est délicate. Vous devez en fait y pénétrer. Cela s'explique par le fait que Safari a choisi d'offrir une fonctionnalité localStorage lorsqu'il est en mode privé, mais avec son quota fixé à zéro. . Cela signifie que, bien que toutes les détections de fonctionnalités simples passent, tous les appels à localStorage.setItem entraînera une exception.

L'entrée du Developer Network de Mozilla sur les API de stockage Web contient une section dédiée à la détection des caractéristiques du stockage local . Voici la méthode recommandée sur cette page :

function storageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return false;
    }
}

Et voici comment l'utiliser :

if (storageAvailable('localStorage')) {
    // Yippee! We can use localStorage awesomeness
}
else {
    // Too bad, no localStorage for us
}

Si vous utilisez NPM, vous pouvez attraper disponible pour le stockage en utilisant

npm install -S storage-available

puis utilisez la fonction comme suit :

if (require('storage-available')('localStorage')) {
    // Yippee! We can use localStorage awesomeness
}

Avis de non-responsabilité : La section de documentation sur MDN et le paquet NPM ont tous deux été rédigés par mes soins.

Answer 4

MDN actualisé la fonction de détection de stockage. En 2018, elle est plus fiable :

function storageAvailable() {
    try {
        var storage = window['localStorage'],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage && storage.length !== 0;
    }
}

Les navigateurs qui prennent en charge localStorage auront une propriété sur l'objet fenêtre nommée localStorage. Toutefois, pour diverses raisons, le simple fait d'affirmer que cette propriété existe peut entraîner des exceptions. Si elle existe, cela ne garantit toujours pas que localStorage est réellement disponible, car plusieurs navigateurs proposent des paramètres qui désactivent localStorage. Ainsi, un navigateur peut soutien localStorage, mais sans le rendre disponible sur aux scripts de la page. Un exemple de cela est Safari, qui en mode Navigation privée nous donne un objet localStorage vide avec un quota de zéro, le rendant effectivement inutilisable. Cependant, nous pouvons toujours obtenir un QuotaExceededError légitime, qui signifie seulement que nous avons utilisé tout l'espace de stockage disponible, mais le stockage est en réalité disponible sur . Notre détection des caractéristiques doit tenir compte de ces scénarios.

Voir ici pour un brève histoire de la détection des caractéristiques de localStorage .

Answer 5

Avec cette fonction, vous pouvez vérifier si le stockage local est disponible ou non, et vous gardez sous contrôle les exceptions possibles.

function isLocalStorageAvailable() {

    try {
        var valueToStore = 'test';
        var mykey = 'key';
        localStorage.setItem(mykey, valueToStore);
        var recoveredValue = localStorage.getItem(mykey);
        localStorage.removeItem(mykey);

        return recoveredValue === valueToStore;
    } catch(e) {
        return false;
    }
}