Javascript Safari 的 html5 localStorage 错误：“QUOTA_EXCEEDED_ERR：DOM 异常 22：尝试向存储添加超出配额的内容。”

html5 localStorage error with Safari: "QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota."

提问by leiyonglin

My webapp have javascript errors in ios safari private browsing:

我的 web 应用程序在 ios safari 隐私浏览中有 javascript 错误：

JavaScript:error

undefined

QUOTA_EXCEEDED_ERR:DOM Exception 22:An attempt was made to add something to storage...

JavaScript：错误

不明确的

QUOTA_EXCEEDED_ERR：DOM 异常 22：尝试向存储中添加内容...

my code:

我的代码：

localStorage.setItem('test',1)

回答by KingKongFrog

Apparently this is by design. When Safari (OS X or iOS) is in private browsing mode, it appears as though localStorageis available, but trying to call setItemthrows an exception.

显然这是设计使然。当 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."

What happens is that the window object still exposes localStoragein the global namespace, but when you call setItem, this exception is thrown. Any calls to removeItemare ignored.

发生的情况是 window 对象仍然暴露localStorage在全局命名空间中，但是当您调用 时setItem，会抛出此异常。任何调用都将removeItem被忽略。

I believe the simplest fix (although I haven't tested this cross browser yet) would be to alter the function isLocalStorageNameSupported()to test that you can also set some value.

我相信最简单的解决方法（虽然我还没有测试过这个跨浏览器）是改变函数isLocalStorageNameSupported()来测试你也可以设置一些值。

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

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

回答by cyberwombat

The fix posted on above link did not work for me. This did:

上面链接上发布的修复程序对我不起作用。这做到了：

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

Derived from http://m.cg/post/13095478393/detect-private-browsing-mode-in-mobile-safari-on-ios5

源自http://m.cg/post/13095478393/detect-private-browsing-mode-in-mobile-safari-on-ios5

回答by philfreo

As mentioned in other answers, you'll always get the QuotaExceededError in Safari Private Browser Mode on both iOS and OS X when localStorage.setItem(or sessionStorage.setItem) is called.

正如其他答案中提到的，当localStorage.setItem(或sessionStorage.setItem) 被调用时，在 iOS 和 OS X 上的 Safari Private Browser Mode 中，您总是会得到 QuotaExceededError 。

One solution is to do a try/catch or Modernizr checkin each instance of using setItem.

一种解决方案是在每个 using 实例中进行try/catch 或Modernizr 检查setItem。

However if you want a shim that simply globally stops this error being thrown, to prevent the rest of your JavaScript from breaking, you can use this:

但是，如果您想要一个简单地全局停止抛出此错误的 shim，以防止其余 JavaScript 中断，您可以使用以下命令：

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

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

回答by Pierre Le Roux

In my context, just developed a class abstraction. When my application is launched, i check if localStorage is working by calling getStorage(). This function also return :

在我的上下文中，刚刚开发了一个类抽象。当我的应用程序启动时，我通过调用getStorage()检查 localStorage 是否正常工作。此函数还返回：

• either localStorage if localStorage is working
• or an implementation of a custom class LocalStorageAlternative

• 如果 localStorage 正在工作，则为 localStorage
• 或自定义类LocalStorageAlternative 的实现

In my code i never call localStorage directly. I call cusStoglobal var, i had initialised by calling getStorage().

在我的代码中，我从不直接调用 localStorage。我调用cusSto全局变量，我已经通过调用getStorage() 进行了初始化。

This way, it works with private browsing or specific Safari versions

这样，它适用于隐私浏览或特定的 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();

回答by karlbecker_com

It seems that Safari 11 changes the behavior, and now local storage works in a private browser window. Hooray!

Safari 11 似乎改变了行为，现在本地存储在私人浏览器窗口中工作。万岁！

Our web app that used to fail in Safari private browsing now works flawlessly. It always worked fine in Chrome's private browsing mode, which has always allowed writing to local storage.

我们曾经在 Safari 隐私浏览中失败的 Web 应用程序现在可以完美运行。它在 Chrome 的隐私浏览模式下始终运行良好，该模式始终允许写入本地存储。

This is documented in Apple's Safari Technology Preview release notes- and the WebKit release notes- for release 29, which was in May 2017.

这记录在 Apple 的Safari Technology Preview 发行说明和WebKit 发行说明中，适用于 2017 年 5 月发布的第 29 版。

Specifically:

具体来说：

• Fixed QuotaExceededError when saving to localStorage in private browsing mode or WebDriver sessions - r215315

• 修复了在隐私浏览模式或 WebDriver 会话中保存到 localStorage 时的 QuotaExceededError - r215315

回答by Jon

To expand on others' answers, here is a compact solution that doesn't expose/add any new variables. It doesn't cover all bases, but it should suit most people who just want a single page app to remain functional (despite no data persistence after reload).

为了扩展其他人的答案，这是一个不公开/添加任何新变量的紧凑解决方案。它没有涵盖所有基础，但它应该适合大多数只希望单页应用程序保持功能的人（尽管重新加载后没有数据持久性）。

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

回答by jorgecasar

I had the same problem using Ionic framework (Angular + Cordova). I know this not solve the problem, but it's the code for Angular Apps based on the answers above. You will have a ephemeral solution for localStorage on iOS version of Safari.

我在使用 Ionic 框架（Angular + Cordova）时遇到了同样的问题。我知道这不能解决问题，但它是基于上述答案的 Angular Apps 代码。您将在 iOS 版本的 Safari 上获得 localStorage 的临时解决方案。

Here is the 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

来源：https: //gist.github.com/jorgecasar/61fda6590dc2bb17e871

Enjoy your coding!

享受你的编码！

回答by Pier-Luc Gendreau

Here's a solution for AngularJS using an IIFEand leveraging the fact that services are singletons.

这是使用IIFE并利用服务是单例的事实的AngularJS 解决方案。

This results in isLocalStorageAvailablebeing set immediately when the service is first injected and avoids needlessly running the check every time local storage needs to be accessed.

这导致在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');
      }
    };
  }
]);

回答by Gabriel Alack

Here is an Angular2+ service version for memory storage alternative, you can just inject into your components, based on Pierre Le Roux' answer.

这是用于内存存储替代方案的 Angular2+ 服务版本，您可以根据 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);
    }

}

回答by Ahmet Can Güven

I just created this repoto provide sessionStorageand localStoragefeatures for unsupported or disabled browsers.

我刚刚创建的这个回购协议，以提供sessionStorage和localStorage功能不支持的或禁用浏览器。

Supported browsers

支持的浏览器

• IE5+
• Chrome all versions
• Mozilla all versions
• Yandex all versions

• IE5+
• Chrome 所有版本
• Mozilla 所有版本
• Yandex所有版本

How it works

这个怎么运作

It detects the feature with the storage type.

它检测具有存储类型的功能。

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

Sets StorageService.localStorageto window.localStorageif it is supported or creates a cookie storage. Sets StorageService.sessionStorageto window.sessionStorageif it is supported or creates a in memory storage for SPA, cookie storage with sesion features for non SPA.

设置StorageService.localStorage为window.localStorage是否支持或创建 cookie 存储。设置StorageService.sessionStorage为window.sessionStorage是否支持或为 SPA 创建内存存储，为非 SPA 创建具有会话功能的 cookie 存储。