web-dev-qa-db-fra.com

Vérifiez si le stockage local est disponible

Je sais qu'il y a eu beaucoup de questions sur la vérification de localStorage, mais que se passe-t-il si quelqu'un le ferme 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");
}

Fonction simple et ça marche. Mais si j'entre dans mes Chrome et que je choisis l'option "Ne pas enregistrer les données" (je ne me souviens plus du nom exact), je n'obtiens rien lorsque j'essaie d'exécuter cette fonction. mais Uncaught Error: SecurityError: DOM Exception 18. Alors, y a-t-il un moyen de vérifier si la personne l'a complètement éteint?

UPDATE: C’est la deuxième fonction que j’ai essayée et je n’obtiens toujours aucune réponse (alerte).

try {
 localStorage.setItem("name", "Hello World!");
} catch (e) {
 if (e == QUOTA_EXCEEDED_ERR) {
     alert('Quota exceeded!');
}
}
javascripterror-handlinglocal-storage
61
user2025469

Utilisez l'approche de modernizr (vous voudrez peut-être 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;
    }
}

if(lsTest() === true){
    // available
}else{
    // unavailable
}

Ce n'est pas aussi concis que d'autres méthodes, mais c'est parce qu'il est conçu pour maximiser la compatibilité.

La source d'origine: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/storage/localstorage.js

Exemple de travail: http://jsfiddle.net/6sm54/2/

110
Joe

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
}

PDATE:

Si vous devez valider que la fonctionnalité existe et qu'elle n'est pas désactivée, vous devez utiliser une approche plus sûre. Pour être parfaitement en sécurité:

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
}
14
Frederik.L

Le stockage local par détection de fonction est délicat. Vous devez réellement y accéder. La raison en est que Safari a choisi d’offrir un objet localStorage fonctionnel en mode privé , mais avec un quotum défini sur zéro . . Cela signifie que même si toutes les fonctionnalités simples détectées passent, tous les appels à localStorage.setItem lancera une exception.

L'entrée du réseau de développeurs de Mozilla sur les API de stockage Web comporte une section dédiée sur la fonctionnalité de détection 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 vous l'utiliseriez:

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

Si vous utilisez NPM, vous pouvez récupérer storage-available using

npm install -S storage-available

puis utilisez la fonction comme suit:

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

Disclaimer: La section de documentation sur MDN et le package NPM ont été créés par moi.

9
Stijn de Witt

MDN mis à jour la fonction de détection de stockage. En 2018, c'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 prenant en charge localStorage auront une propriété sur l'objet window nommée localStorage. Cependant, pour diverses raisons, le simple fait d'affirmer que la propriété existe peut générer des exceptions. S'il existe, cela ne garantit toujours pas que localStorage est réellement disponible, car différents navigateurs proposent des paramètres qui désactivent localStorage. Ainsi, un navigateur peut prendre en charge localStorage, mais ne pas le rendre disponible à la scripts sur la page. Safari en est un exemple. En mode de navigation privée, nous obtenons un objet localStorage vide avec un quota de zéro, ce qui le rend inutilisable. Cependant, nous pouvons toujours obtenir une erreur QuotaExceededError légitime, ce qui signifie simplement que nous avons utilisé tout l'espace de stockage disponible, mais le stockage est en fait disponible . Notre fonctionnalité de détection doit prendre en compte ces scénarios.

Voir ici pour un bref historique de LocalStorage avec détection de caractéristiques .

3
mcmimik

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

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;
    }
}
0
luis moyano