html - What happens when localStorage is full?

Question

I have found articles regarding cache behaviour so I can only assume that it's not much different but I wanted to make sure.

I have read that most browser have 5MB (give or take) for localStorage and I was interested in what would be the behaviour of the browsers?

I understand every browser acts differently but I'm interested mostly in Safari, Chrome and Firefox (as those are the ones I consider as browsers).

• Will the browsers mentioned above delete data from my website or it will choose "the oldest" or something of the sort?
• Will my item be saved in such case?

And the most important :

• Lets say I "abuse" the localStorage on my website trying to use it all up, and in the same page I'm filling it up and trying to save more. Will I get a warning? Will the getItem return null when this happens or is it somehow saved in memory?

• What happens if I try and save an item larger than the localStorage size?

Answered: answer can be found here

• Can the same exact behaviour be expected from sessionStorage which allegedly should be the same?

I know this is a lot of questions but I'm trying to understand all that's related to the subject, I'd be thankful for any part of the question you can answer.

Answer 1

Firstly, some useful resources:

• Web Storage Support Test - has a table comparing data storage quotas between browsers.
• Simple localStorage quota test
• Summary of localStorage browser behaviour
• W3C spec - indicating how a user agent (e.g. browser) should behave (both localStorage and sessionStorage).

In answer to your question, desktop browsers tend to have an initial maximum localStorage quota of 5MB per domain. This can be adjusted by the user in some cases:

• Opera: opera:config -> Domain Quota For localStorage
• Firefox: about:config -> dom.storage.default_quota

In Chrome, there doesn't seem to be a way for the user to adjust this setting although like Opera, localStorage data can be edited directly per domain using the Developer Tools.

When you try to store data in localStorage, the browser checks whether there's enough remaining space for the current domain. If yes:

• The data is stored, overwriting values if an identical key already exists.

If no:

• The data is not stored and no existing data is overwritten.
• A QUOTA_EXCEEDED_ERR exception is thrown.

In this case, getItem(key) will return the last value that was successfully stored, if any.

(Opera is slightly different in that it displays a dialog box giving the user the choice of increasing storage space for the current domain.)

Note that sessionStorage and localStorage are both implementations of the same Storage object so their behaviour is similar and error handling is the same.