LocalStorage - detect if local storage is already full

Question

is there a way to detect if local storage has reached its maximum value to store? Or at least something like an error message that tells that i can't store anymore because i have reached the maximum size? I want to catch this so i can remove the oldest items in my local storage and insert new ones.

I am using local storage to store some of my queries from my database so users would be able to load them immediately if that specific item exist on local storage. if not then, that is the time i retrieve the data in the server.

Possible duplicate of [What is the max size of localStorage values?](http://stackoverflow.com/questions/2989284/what-is-the-max-size-of-localstorage-values) — node_modules, Mar 30 '17 at 11:14
An error is thrown - http://chrisberkhout.com/blog/localstorage-errors/ — dmoo, Mar 30 '17 at 11:15
Possible duplicate of [What happens when localStorage is full?](http://stackoverflow.com/questions/13567509/what-happens-when-localstorage-is-full) — JJJ, Mar 30 '17 at 11:24

score 7 · Accepted Answer · answered Mar 30 '17 at 11:19

7

Upon attempting to add to localstorage, if there is not enough space, this error will be thrown. In you particular scenario, you could use this event to free up some space.

try {
  localStorage.setItem("name", "Hello World!"); //saves to the database, "key", "value"
} catch (e) {
  if (e == QUOTA_EXCEEDED_ERR) {
    alert('Quota exceeded!'); //data wasn't successfully saved due to quota exceed so throw an error
  }
}

credit to - http://chrisberkhout.com/blog/localstorage-errors/

answered Mar 30 '17 at 11:19

dmoo

1,509
13
16

2

For those who don't visit the credited link it should be mentioned that this will not work correctly for all current versions of major browsers. Checking e.code === "22" || e.code === "1024" will probably be sufficient to cover those in most cases. (Tested in current versions of Chrome, Firefox(+Dev-Edition), Opera, Edge, IE.) – Wolfone Aug 03 '18 at 07:34
I've just checked that and all latest browsers Chrome, Safari, Firefox have the same "QuotaExceededError" expection.name – nickbullock Jul 14 '22 at 08:14

LocalStorage - detect if local storage is already full

1 Answers1