html5 localStorage error with Safari QUOTA EXCEEDED ERR DOM Exception 22 An attempt was made to add something to storage that exceeded the quota

Question

My webapp have javascript errors in ios safari private browsing      JavaScript error      undefined      QUOTA EXCEEDED ERR DOM Exception 22 An attempt was made to add something to storage      my code   localStorage setItem  test  1

User · Answer

Don t use it if not supported and to check support just call this function     sharing in Es6 full read and write localStorage Example with support check   const LOCAL STORAGE KEY    tds app localdata    const isSupported        gt      try       localStorage setItem  supported    1        localStorage removeItem  supported        return true      catch  error        return false           const writeToLocalStorage     components   gt       isSupported         localStorage setItem LOCAL STORAGE KEY  JSON stringify components           components    const isEmpty   component   gt    component    Object keys component  length     0    const readFromLocalStorage          gt   isSupported   JSON parse localStorage getItem LOCAL STORAGE KEY           null        This will make sure your keys are set and retrieved properly on all browsers

User · Answer

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

User · Answer

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   One solution is to do a try catch or Modernizr check in each instance of using 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   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

User · Answer

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   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  Enjoy your coding

User · Answer

Here s a solution for AngularJS using an IIFE and leveraging the fact that services are singletons   This results in isLocalStorageAvailable being set immediately when the service is first injected and avoids needlessly running the check every time local storage needs to be accessed   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

User · Answer

I have created a patch for the issue  Simply I am checking if the browser does support localStorage or sessionStorage or not  If not then the storage engine will be Cookie  But the negative side is Cookie have very tiny storage memory     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  lt  allCookie length  i                  if  allCookie i  trim   indexOf name     0                    cval   allCookie i  trim   split                                          return  cval length  gt  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

User · Answer

Apparently this is by design  When Safari  OS X or iOS  is in private browsing mode  it appears as though localStorage is available  but trying to call setItem throws an exception   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 localStorage in the global namespace  but when you call setItem  this exception is thrown  Any calls to removeItem are ignored   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   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  amp  amp  win localStorageName              catch  error                 return false

User · Answer

The following script solved my problem      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  amp  amp  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        It checks if localStorage exists and can be used and in the negative case  it creates a fake local storage and uses it instead of the original localStorage  Please let me know if you need further information

User · Answer

I just created this repo to provide sessionStorage and localStorage features for unsupported or disabled browsers   Supported browsers   IE5  Chrome all versions Mozilla all versions Yandex all versions   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 localStorage to window localStorage if it is supported or creates a cookie storage  Sets StorageService sessionStorage to window sessionStorage if it is supported or creates a in memory storage for SPA  cookie storage with sesion features for non SPA

User · Answer

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

User · Answer

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     either localStorage if localStorage is working or an implementation of a custom class LocalStorageAlternative   In my code i never call localStorage directly  I call cusStoglobal var  i had initialised by calling getStorage     This way  it works with private browsing or specific Safari versions  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

User · Answer

The accepted answer seems not adequate in several situations  To check whether the localStorage or sessionStorage are supported  I use the following snippet from 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  amp  amp                   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    amp  amp                 acknowledge QuotaExceededError only if there s something already stored              storage  amp  amp  storage length     0            Use this snippet like this  and fallback to  for example  using cookie  if  storageAvailable  localStorage           Yippee  We can use localStorage awesomeness   else        Too bad  no localStorage for us   document cookie   key    quot   quot    encodeURIComponent value    expires    quot   path   quot      I have made the fallbackstorage package which uses this snippet to check for the storage availability and fallback to a manually implemented MemoryStorage  import  getSafeStorage  from  fallbackstorage   getSafeStorage   setItem  test    1      always work

User · Answer

Here is an Angular2  service version for memory storage alternative  you can just inject into your components  based on Pierre Le Roux  answer   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

User · Answer

It seems that Safari 11 changes the behavior  and now local storage works in a private browser window  Hooray   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   This is documented in Apple s Safari Technology Preview release notes - and the WebKit release notes - for release 29  which was in May 2017    Specifically    Fixed QuotaExceededError when saving to localStorage in private browsing mode or WebDriver sessions - r215315

User · Answer

var mod    test         try           sessionStorage setItem mod  mod           sessionStorage removeItem mod           return true          catch  e            return false

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

Don't use it if not supported and to check support just call this function

Examples related to javascript

Examples related to html

Examples related to local-storage