HTML5 Localstorage space left

Question

How can I calculate how much space is left for storing data?

I want to warn the user that disk space(localstorage space) is almost full and they must remove some items.

It would be cool to be able to make an pie chart.

Answer 1

Unfortunately there is no programatic API for this (although IE has support for telling you how much space is left), and max sizes differ among browsers (see What is the max size of localStorage values?). If I were storing a lot of data, I'd probably skip LocalStorage and use IndexedDB or WebSQL (which is a dead spec, but still works well in a lot of cases). I tend to only use LocalStorage for "known" data sets. Ie, preferences, caches, etc. I compare this to "unknown datasets" (not a great name) for things like user notes, etc, where I'd push IDB/WebSQL instead.

You could safely assume 5 megs or so and get the size (How to find the size of localStorage).

As an FYI, there is work being done to make this better so it won't be so vague in the future.