Erreur html5 localStorage avec Safari: «QUOTA_EXCEEDED_ERR: DOM Exception 22: Une tentative a été faite pour ajouter quelque chose au stockage qui a dépassé le quota.»

Mon application Web a des erreurs javascript dans la navigation privée iOS Safari:

JavaScript: erreur

indéfini

QUOTA_EXCEEDED_ERR: Exception DOM 22: Une tentative a été faite pour ajouter quelque chose au stockage ...

mon code:

localStorage.setItem('test',1)

Apparemment, c'est par conception. Lorsque Safari (OS X ou iOS) est en mode de navigation privée, il semble qu'il localStoragesoit disponible, mais essayer d'appeler setItemlève une exception.

store.js line 73
"QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota."

Ce qui se passe, c'est que l'objet window est toujours exposé localStoragedans l'espace de noms global, mais lorsque vous appelez setItem, cette exception est levée. Tous les appels à removeItemsont ignorés.

Je pense que la solution la plus simple (bien que je n'ai pas encore testé ce navigateur croisé) serait de modifier la fonction isLocalStorageNameSupported()pour tester que vous pouvez également définir une valeur.

https://github.com/marcuswestin/store.js/issues/42

function isLocalStorageNameSupported() 
{
    var testKey = 'test', storage = window.sessionStorage;
    try 
    {
        storage.setItem(testKey, '1');
        storage.removeItem(testKey);
        return localStorageName in win && win[localStorageName];
    } 
    catch (error) 
    {
        return false;
    }
}

Le correctif publié sur le lien ci-dessus n'a pas fonctionné pour moi. Cela a fait:

function isLocalStorageNameSupported() {
  var testKey = 'test', storage = window.localStorage;
  try {
    storage.setItem(testKey, '1');
    storage.removeItem(testKey);
    return true;
  } catch (error) {
    return false;
  }
}

Dérivé de http://m.cg/post/13095478393/detect-private-browsing-mode-in-mobile-safari-on-ios5

Comme mentionné dans d'autres réponses, vous obtiendrez toujours l'erreur QuotaExceededError en mode navigateur privé Safari sur iOS et OS X lorsque localStorage.setItem(ou sessionStorage.setItem) est appelé.

Une solution consiste à effectuer une vérification try / catch ou Modernizr dans chaque instance d'utilisation setItem.

Cependant, si vous voulez un shim qui arrête simplement globalement cette erreur, pour empêcher le reste de votre JavaScript de se casser, vous pouvez utiliser ceci:

https://gist.github.com/philfreo/68ea3cd980d72383c951

// Safari, in Private Browsing Mode, looks like it supports localStorage but all calls to setItem
// throw QuotaExceededError. We're going to detect this and just silently drop any calls to setItem
// to avoid the entire page breaking, without having to do a check at each usage of Storage.
if (typeof localStorage === 'object') {
    try {
        localStorage.setItem('localStorage', 1);
        localStorage.removeItem('localStorage');
    } catch (e) {
        Storage.prototype._setItem = Storage.prototype.setItem;
        Storage.prototype.setItem = function() {};
        alert('Your web browser does not support storing settings locally. In Safari, the most common cause of this is using "Private Browsing Mode". Some settings may not save or some features may not work properly for you.');
    }
}

Dans mon contexte, je viens de développer une abstraction de classe. Lorsque mon application est lancée, je vérifie si localStorage fonctionne en appelant getStorage () . Cette fonction renvoie également:

• soit localStorage si localStorage fonctionne
• ou une implémentation d'une classe personnalisée LocalStorageAlternative

Dans mon code, je n'appelle jamais localStorage directement. J'appelle cusSto global var, j'avais initialisé en appelant getStorage () .

De cette façon, cela fonctionne avec la navigation privée ou des versions spécifiques de Safari

function getStorage() {

    var storageImpl;

     try { 
        localStorage.setItem("storage", ""); 
        localStorage.removeItem("storage");
        storageImpl = localStorage;
     }
     catch (err) { 
         storageImpl = new LocalStorageAlternative();
     }

    return storageImpl;

}

function LocalStorageAlternative() {

    var structureLocalStorage = {};

    this.setItem = function (key, value) {
        structureLocalStorage[key] = value;
    }

    this.getItem = function (key) {
        if(typeof structureLocalStorage[key] != 'undefined' ) {
            return structureLocalStorage[key];
        }
        else {
            return null;
        }
    }

    this.removeItem = function (key) {
        structureLocalStorage[key] = undefined;
    }
}

cusSto = getStorage();

Il semble que Safari 11 change le comportement, et maintenant le stockage local fonctionne dans une fenêtre de navigateur privé. Hourra!

Notre application Web qui échouait dans la navigation privée Safari fonctionne désormais parfaitement. Cela a toujours bien fonctionné dans le mode de navigation privée de Chrome, qui a toujours permis d'écrire sur le stockage local.

Ceci est documenté dans les notes de mise à jour de Safari Technology Preview d' Apple - et dans les notes de mise à jour de WebKit - pour la version 29, qui date de mai 2017.

Plus précisément:

• Correction de QuotaExceededError lors de l'enregistrement dans localStorage en mode de navigation privée ou dans les sessions WebDriver - r215315

Pour développer les réponses des autres, voici une solution compacte qui n'expose / n'ajoute aucune nouvelle variable. Il ne couvre pas toutes les bases, mais il devrait convenir à la plupart des personnes qui souhaitent qu'une seule application de page reste fonctionnelle (malgré l'absence de persistance des données après le rechargement).

(function(){
    try {
        localStorage.setItem('_storage_test', 'test');
        localStorage.removeItem('_storage_test');
    } catch (exc){
        var tmp_storage = {};
        var p = '__unique__';  // Prefix all keys to avoid matching built-ins
        Storage.prototype.setItem = function(k, v){
            tmp_storage[p + k] = v;
        };
        Storage.prototype.getItem = function(k){
            return tmp_storage[p + k] === undefined ? null : tmp_storage[p + k];
        };
        Storage.prototype.removeItem = function(k){
            delete tmp_storage[p + k];
        };
        Storage.prototype.clear = function(){
            tmp_storage = {};
        };
    }
})();

J'ai eu le même problème en utilisant le framework Ionic (Angular + Cordova). Je sais que cela ne résout pas le problème, mais c'est le code pour Angular Apps basé sur les réponses ci-dessus. Vous disposerez d'une solution éphémère pour localStorage sur la version iOS de Safari.

Voici le code:

angular.module('myApp.factories', [])
.factory('$fakeStorage', [
    function(){
        function FakeStorage() {};
        FakeStorage.prototype.setItem = function (key, value) {
            this[key] = value;
        };
        FakeStorage.prototype.getItem = function (key) {
            return typeof this[key] == 'undefined' ? null : this[key];
        }
        FakeStorage.prototype.removeItem = function (key) {
            this[key] = undefined;
        };
        FakeStorage.prototype.clear = function(){
            for (var key in this) {
                if( this.hasOwnProperty(key) )
                {
                    this.removeItem(key);
                }
            }
        };
        FakeStorage.prototype.key = function(index){
            return Object.keys(this)[index];
        };
        return new FakeStorage();
    }
])
.factory('$localstorage', [
    '$window', '$fakeStorage',
    function($window, $fakeStorage) {
        function isStorageSupported(storageName) 
        {
            var testKey = 'test',
                storage = $window[storageName];
            try
            {
                storage.setItem(testKey, '1');
                storage.removeItem(testKey);
                return true;
            } 
            catch (error) 
            {
                return false;
            }
        }
        var storage = isStorageSupported('localStorage') ? $window.localStorage : $fakeStorage;
        return {
            set: function(key, value) {
                storage.setItem(key, value);
            },
            get: function(key, defaultValue) {
                return storage.getItem(key) || defaultValue;
            },
            setObject: function(key, value) {
                storage.setItem(key, JSON.stringify(value));
            },
            getObject: function(key) {
                return JSON.parse(storage.getItem(key) || '{}');
            },
            remove: function(key){
                storage.removeItem(key);
            },
            clear: function() {
                storage.clear();
            },
            key: function(index){
                storage.key(index);
            }
        }
    }
]);

Source: https://gist.github.com/jorgecasar/61fda6590dc2bb17e871

Profitez de votre codage!

Voici une solution pour AngularJS utilisant un IIFE et tirant parti du fait que les services sont des singletons .

Cela entraîne isLocalStorageAvailableune définition immédiate lorsque le service est injecté pour la première fois et évite d'exécuter inutilement la vérification à chaque fois que le stockage local doit être accédé.

angular.module('app.auth.services', []).service('Session', ['$log', '$window',
  function Session($log, $window) {
    var isLocalStorageAvailable = (function() {
      try {
        $window.localStorage.world = 'hello';
        delete $window.localStorage.world;
        return true;
      } catch (ex) {
        return false;
      }
    })();

    this.store = function(key, value) {
      if (isLocalStorageAvailable) {
        $window.localStorage[key] = value;
      } else {
        $log.warn('Local Storage is not available');
      }
    };
  }
]);

Je viens de créer cette prise en pension pour fournir sessionStorageet localStoragefonctionnalités pour les navigateurs non pris en charge ou à mobilité réduite.

Navigateurs pris en charge

• IE5 +
• Chrome toutes les versions
• Mozilla toutes les versions
• Yandex toutes les versions

Comment ça fonctionne

Il détecte la fonction avec le type de stockage.

function(type) {
    var testKey = '__isSupported',
        storage = window[type];
    try {
        storage.setItem(testKey, '1');
        storage.removeItem(testKey);
        return true;
    } catch (error) {
        return false;
    }
};

Ensembles StorageService.localStoragede window.localStoragesi elle est prise en charge ou crée un stockage de cookies. Ensembles StorageService.sessionStoragede window.sessionStoragesi elle est prise en charge ou crée un stockage dans la mémoire pour SPA, le stockage des cookies avec des fonctionnalités de sesion pour non SPA.

Voici une version de service Angular2 + pour une alternative de stockage mémoire, vous pouvez simplement l'injecter dans vos composants, sur la base de la réponse de Pierre Le Roux.

import { Injectable } from '@angular/core';

// Alternative to localstorage, memory
// storage for certain browsers in private mode
export class LocalStorageAlternative {
    private  structureLocalStorage = {};

    setItem(key: string, value: string): void {
        this.structureLocalStorage[key] = value;
    }

    getItem(key: string): string {
        if (typeof this.structureLocalStorage[key] !== 'undefined' ) {
            return this.structureLocalStorage[key];
        }
        return null;
    }

    removeItem(key: string): void {
        this.structureLocalStorage[key] = undefined;
    }
}

@Injectable()
export class StorageService {
    private storageEngine;

    constructor() {
        try {
            localStorage.setItem('storage_test', '');
            localStorage.removeItem('storage_test');
            this.storageEngine = localStorage;
        } catch (err) {
            this.storageEngine = new LocalStorageAlternative();
        }
    }

    setItem(key: string, value: string): void {
        this.storageEngine.setItem(key, value);
    }

    getItem(key: string): string {
        return this.storageEngine.getItem(key);
    }

    removeItem(key: string): void {
        this.storageEngine.removeItem(key);
    }

}

Ne l'utilisez pas s'il n'est pas pris en charge et pour vérifier le support, appelez simplement cette fonction

partage dans Es6 complet lecture et écriture localStorage Exemple avec contrôle de support

const LOCAL_STORAGE_KEY = 'tds_app_localdata';

const isSupported = () => {
  try {
    localStorage.setItem('supported', '1');
    localStorage.removeItem('supported');
    return true;
  } catch (error) {
    return false;
  }
};


const writeToLocalStorage =
  components =>
    (isSupported ?
      localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(components))
      : components);

const isEmpty = component => (!component || Object.keys(component).length === 0);

const readFromLocalStorage =
  () => (isSupported ? JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || {} : null);

Cela garantira que vos clés sont définies et récupérées correctement sur tous les navigateurs.

J'ai créé un correctif pour le problème. Je vérifie simplement si le navigateur prend en charge localStorage ou sessionStorage ou non. Sinon, le moteur de stockage sera Cookie. Mais le côté négatif est que Cookie a une très petite mémoire de stockage :(

function StorageEngine(engine) {
    this.engine = engine || 'localStorage';

    if(!this.checkStorageApi(this.engine)) {
        // Default engine would be alway cooke
        // Safari private browsing issue with localStorage / sessionStorage
        this.engine = 'cookie';
    }
}

StorageEngine.prototype.checkStorageApi = function(name) {
    if(!window[name]) return false;
    try {
        var tempKey = '__temp_'+Date.now();
        window[name].setItem(tempKey, 'hi')
        window[name].removeItem(tempKey);
        return true;
    } catch(e) {
        return false;
    }
}

StorageEngine.prototype.getItem = function(key) {
    if(['sessionStorage', 'localStorage'].includes(this.engine)) {
        return window[this.engine].getItem(key);
    } else if('cookie') {
        var name = key+"=";
        var allCookie = decodeURIComponent(document.cookie).split(';');
        var cval = [];
        for(var i=0; i < allCookie.length; i++) {
            if (allCookie[i].trim().indexOf(name) == 0) {
                cval = allCookie[i].trim().split("=");
            }   
        }
        return (cval.length > 0) ? cval[1] : null;
    }
    return null;
}

StorageEngine.prototype.setItem = function(key, val, exdays) {
    if(['sessionStorage', 'localStorage'].includes(this.engine)) {
        window[this.engine].setItem(key, val);
    } else if('cookie') {
        var d = new Date();
        var exdays = exdays || 1;
        d.setTime(d.getTime() + (exdays*24*36E5));
        var expires = "expires="+ d.toUTCString();
        document.cookie = key + "=" + val + ";" + expires + ";path=/";
    }
    return true;
}


// ------------------------
var StorageEngine = new StorageEngine(); // new StorageEngine('localStorage');
// If your current browser (IOS safary or any) does not support localStorage/sessionStorage, then the default engine will be "cookie"

StorageEngine.setItem('keyName', 'val')

var expireDay = 1; // for cookie only
StorageEngine.setItem('keyName', 'val', expireDay)
StorageEngine.getItem('keyName')

La réponse acceptée ne semble pas adéquate dans plusieurs situations.

Pour vérifier si le localStorageou sessionStoragesont pris en charge, j'utilise l'extrait suivant de MDN .

function storageAvailable(type) {
    var storage;
    try {
        storage = window[type];
        var 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);
    }
}

Utilisez cet extrait de code comme celui-ci et utilisez un cookie, par exemple:

if (storageAvailable('localStorage')) {
  // Yippee! We can use localStorage awesomeness
}
else {
  // Too bad, no localStorage for us
  document.cookie = key + "=" + encodeURIComponent(value) + expires + "; path=/";
}

J'ai créé le package fallbackstorage qui utilise cet extrait de code pour vérifier la disponibilité du stockage et le repli vers un MemoryStorage implémenté manuellement.

import {getSafeStorage} from 'fallbackstorage'

getSafeStorage().setItem('test', '1') // always work

var mod = 'test';
      try {
        sessionStorage.setItem(mod, mod);
        sessionStorage.removeItem(mod);
        return true;
      } catch (e) {
        return false;
      }

Le script suivant a résolu mon problème:

// Fake localStorage implementation. 
// Mimics localStorage, including events. 
// It will work just like localStorage, except for the persistant storage part. 

var fakeLocalStorage = function() {
  var fakeLocalStorage = {};
  var storage; 

  // If Storage exists we modify it to write to our fakeLocalStorage object instead. 
  // If Storage does not exist we create an empty object. 
  if (window.Storage && window.localStorage) {
    storage = window.Storage.prototype; 
  } else {
    // We don't bother implementing a fake Storage object
    window.localStorage = {}; 
    storage = window.localStorage; 
  }

  // For older IE
  if (!window.location.origin) {
    window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
  }

  var dispatchStorageEvent = function(key, newValue) {
    var oldValue = (key == null) ? null : storage.getItem(key); // `==` to match both null and undefined
    var url = location.href.substr(location.origin.length);
    var storageEvent = document.createEvent('StorageEvent'); // For IE, http://stackoverflow.com/a/25514935/1214183

    storageEvent.initStorageEvent('storage', false, false, key, oldValue, newValue, url, null);
    window.dispatchEvent(storageEvent);
  };

  storage.key = function(i) {
    var key = Object.keys(fakeLocalStorage)[i];
    return typeof key === 'string' ? key : null;
  };

  storage.getItem = function(key) {
    return typeof fakeLocalStorage[key] === 'string' ? fakeLocalStorage[key] : null;
  };

  storage.setItem = function(key, value) {
    dispatchStorageEvent(key, value);
    fakeLocalStorage[key] = String(value);
  };

  storage.removeItem = function(key) {
    dispatchStorageEvent(key, null);
    delete fakeLocalStorage[key];
  };

  storage.clear = function() {
    dispatchStorageEvent(null, null);
    fakeLocalStorage = {};
  };
};

// Example of how to use it
if (typeof window.localStorage === 'object') {
  // Safari will throw a fit if we try to use localStorage.setItem in private browsing mode. 
  try {
    localStorage.setItem('localStorageTest', 1);
    localStorage.removeItem('localStorageTest');
  } catch (e) {
    fakeLocalStorage();
  }
} else {
  // Use fake localStorage for any browser that does not support it.
  fakeLocalStorage();
}

Il vérifie si localStorage existe et peut être utilisé et dans le cas négatif, il crée un faux stockage local et l'utilise à la place du localStorage d'origine. Veuillez me faire savoir si vous avez besoin de plus amples informations.