How to get quota of localStorage in HTML5

It is sometimes important to detect the actual quota of storage that the current client browser supports before actually storing data into it. To prevent  the exception QUOTA_EXCEEDED_ERR to happen in the browser, as a developer you will always need to query what are the memory that can be stored without exceeding the quota given by the client to the application.

Let us take a look how to query local storage :

webkitStorageInfo.queryUsageAndQuota( webkitStorageInfo.TEMPORARY,  showData, showerror);
webkitStorageInfo.queryUsageAndQuota( webkitStorageInfo.PERSISTENT,  showData, showerror);


The above two lines of code will queryUsageAndQuota of the browser. If the data cannot be retrieved, it will call the error callback, otherwise it will call showData.

 

function showData (used, remaining) {
/// the used and remaining bytes will be received inside this method automatically.
}

As far as I know, Mozilla Firefox, Chrome, Opera supports 5MB of storage while Internet Exporer supports 10MB of local storage, but this data might change.

 

By the way, you should also note that webkitStorageInfo API is only available in Chrome for time being, but when specs are ready those will be available in other browsers too in near future.

Thanks for reading

Abhishek Sur

Abhishek Sur is a Microsoft MVP since year 2011. He is an architect in the .NET platform. He has profound theoretical insight and years of hands on experience in different .NET products and languages. He leads the Microsoft User Group in Kolkata named KolkataGeeks, and regularly organizes events and seminars in various places for spreading .NET awareness. He is associated with the Microsoft Insider list on WPF and C#, and is in constant touch with product group teams. He blogs at http://www.abhisheksur.com His Book : Visual Studio 2012 and .NET 4.5 Expert Development Cookbook. Follow Abhishek at Twitter : @abhi2434