В моем веб-приложении есть ошибки javascript в приватном просмотре ios safari:

JavaScript : ошибка

неопределенный

QUOTA_EXCEEDED_ERR: DOM Exception 22: была сделана попытка добавить что-то в хранилище ...

Мой код:

localStorage.setItem('test',1)
133
leiyonglin 28 Янв 2013 в 08:16

13 ответов

Лучший ответ

Видимо это по замыслу. Когда Safari (OS X или iOS) находится в режиме частного просмотра, создается впечатление, что localStorage доступен, но попытка вызова setItem вызывает исключение.

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

Что происходит, так это то, что объект окна все еще предоставляет localStorage в глобальном пространстве имен, но когда вы вызываете setItem, это исключение выдается. Любые вызовы removeItem игнорируются.

Я считаю, что самое простое исправление (хотя я еще не тестировал этот кросс-браузер) - изменить функцию isLocalStorageNameSupported(), чтобы проверить, что вы также можете установить какое-то значение.

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;
    }
}
183
toniedzwiedz 26 Май 2014 в 10:44

Кажется, что Safari 11 меняет поведение, и теперь локальное хранилище работает в частном окне браузера. Ура!

Наше веб-приложение, которое раньше не работало в режиме приватного просмотра Safari, теперь работает безупречно. Он всегда хорошо работал в режиме частного просмотра Chrome, который всегда позволял записывать в локальное хранилище.

Это описано в заметках о выпуске Safari Technology Preview - и заметки о выпуске WebKit - для выпуска 29, который был в мае 2017 года.

В частности:

  • Исправлена ошибка QuotaExceededError при сохранении в localStorage в режиме частного просмотра или сеансах WebDriver - r215315
5
karlbecker_com 1 Авг 2018 в 16:59

Вот решение для AngularJS, использующее IIFE и используя факт эти сервисы являются одиночными.

Это приводит к тому, что isLocalStorageAvailable устанавливается сразу, когда служба впервые вводится, и позволяет избежать ненужного запуска проверки каждый раз, когда требуется доступ к локальному хранилищу.

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');
      }
    };
  }
]);
2
Pier-Luc Gendreau 20 Мар 2015 в 16:43

Следующий скрипт решил мою проблему:

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

Он проверяет, существует ли localStorage и можно ли его использовать, а в отрицательном случае создает поддельное локальное хранилище и использует его вместо исходного localStorage. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация.

-2
Tunaki 28 Июл 2016 в 20:42

Исправление, размещенное по вышеуказанной ссылке, не работает для меня. Это сделал:

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

Получено из http://m.cg / пост / 13095478393 / детектировать -частного - просмотра - режим - в - мобильно- сафари на ios5

38
cyberwombat 20 Окт 2015 в 18:30

Вот сервисная версия Angular2 + для альтернативы хранилищу памяти, которую вы можете просто внедрить в свои компоненты, основываясь на ответе Пьера Ле Ру.

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

}
0
Gabriel Alack 28 Мар 2019 в 20:37
var mod = 'test';
      try {
        sessionStorage.setItem(mod, mod);
        sessionStorage.removeItem(mod);
        return true;
      } catch (e) {
        return false;
      }
-1
Naim DOGAN 4 Окт 2018 в 11:46

Я создал патч для этой проблемы. Просто я проверяю, поддерживает ли браузер localStorage или sessionStorage или нет. Если нет, то механизм хранения будет Cookie. Но отрицательная сторона - у Cookie очень крошечная память :(

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')
0
Saddam H 17 Дек 2019 в 20:28

Не используйте его, если он не поддерживается, а для проверки поддержки просто вызовите эту функцию

совместное использование в Es6 полного чтения и записи LocalStorage Пример с проверкой поддержки

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

Это обеспечит правильную установку и получение ключей во всех браузерах.

0
Tarandeep Singh 10 Авг 2017 в 18:41

Чтобы расширить ответы других, вот компактное решение, которое не раскрывает / добавляет новые переменные. Он не охватывает все основы, но должен подходить большинству людей, которые хотят, чтобы одностраничное приложение оставалось работоспособным (несмотря на отсутствие сохранения данных после перезагрузки).

(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 = {};
        };
    }
})();
4
Jon 25 Фев 2016 в 09:59

Как упоминалось в других ответах, вы всегда получите QuotaExceededError в режиме приватного браузера Safari как на iOS, так и на OS X при вызове localStorage.setItem (или sessionStorage.setItem).

Одним из решений является сделать попытку / поймать или проверку Modernizr в каждом экземпляр использования setItem.

Однако, если вы хотите, чтобы шим, который просто глобально останавливал эту ошибку, чтобы предотвратить поломку остальной части вашего JavaScript, вы можете использовать это:

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.');
    }
}
25
philfreo 22 Ноя 2014 в 19:17

Я только что создал этот репозиторий, чтобы предоставить sessionStorage и localStorage функции для неподдерживаемых или отключенные браузеры.

Поддерживаемые браузеры

  • IE5 +
  • Chrome все версии
  • Mozilla все версии
  • Яндекс все версии

Как это работает

Он обнаруживает функцию с типом хранения.

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

Устанавливает StorageService.localStorage в window.localStorage, если это поддерживается, или создает хранилище cookie. Устанавливает StorageService.sessionStorage в window.sessionStorage, если это поддерживается, или создает в памяти хранилище для SPA, хранилище cookie с функциями безопасности для не SPA.

1
Ahmet Can Güven 14 Ноя 2017 в 07:25

У меня была такая же проблема с использованием Ionic Framework (Angular + Cordova). Я знаю, что это не решает проблему, но это код для Angular Apps, основанный на ответах выше. У вас будет временное решение для localStorage в iOS-версии Safari.

Вот код:

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

Источник: https://gist.github.com/jorgecasar/61fda6590dc2bb17e871

Приятного кодирования!

3
kenorb 24 Фев 2015 в 21:37