I am creating an app using the Bespin editor and HTML5's localStorage. It stores all files locally and helps with grammar, uses JSLint and some other parsers for CSS and HTML to aid the user.
I want to calculate how much of the localStorage limit has been used and how much there actually is. Is this possible today? I was thinking for not to simply calculate the bits that are stored. But then again I'm not sure what more is there that I can't measure myself.
Source: Tips4all
I didn't find a universal way to get the remaining limit on the browsers I needed, but I did find out that when you do reach the limit there is an error message that pops up. This is of-course different in each browser.
ReplyDeleteTo max it out I used this little script:
localStorage.setItem("DATA", "m");
for(i=0 ; i<40 ; i++) {
var data = localStorage.getItem("DATA");
try {
localStorage.setItem("DATA", data + data);
} catch(e) {
console.log("LIMIT REACHED: (" + i + ")");
console.log(e);
}
}
localStorage.removeItem("DATA");
From that I got this information:
Google Chrome
DOMException:
code: 22
message: "QUOTA_EXCEEDED_ERR: DOM Exception 22"
name: "QUOTA_EXCEEDED_ERR"
Mozilla Firefox
DOMException:
code: 1014
message: "Persistent storage maximum size reached"
name: "NS_ERROR_DOM_QUOTA_REACHED"
Safari
Crashed (almost, took about 4 min to recover)
Internet Explorer (community)
Anyone wanna to try? (I'm on a Mac, no Windows)
My solution
So far my solution is to add an extra call each time the user would save anything. And if the exception is caught then I would tell them that they are running out of storage capacity.
Edit: Delete the added data
I forgot to mention that for this to actually work you would need to delete the DATA item that was set originally. The change is reflected above by using the removeItem() function.
You may be able to get somewhat of an idea by using the JSON methods to turn the whole localStorage object to a JSON Object:
ReplyDeleteJSON.stringify(localStorage).length
I don't know how byte-accurate it would be, especially with the few bytes of added markup if you're using additional objects - but I figure it's better than thinking you're only pushing 28K and instead doing 280K (or vice-versa).
IE8 implements the remainingSpace property for this purpose:
ReplyDeletealert(window.localStorage.remainingSpace); // should return 5000000 when empty
Unfortunately it seems that this is not available in the other browsers. However I am not sure if they implement something similar.
To add to the browser test results:
ReplyDeleteFirefox
i=22.
Safari
Version 5.0.4 on my Mac didn't hang. Error as Chrome. i=21.
Opera
Tells the user that the website wants to store data but doesn't have enough space. The user can reject the request, up the limit to the amount required or to several other limits, or set it to unlimited. Go to opera:webstorage to say whether this message appears or not. i=20. Error thrown is same as Chrome.
IE9 standards mode
Error as Chrome. i=22.
IE9 in IE8 standards mode
Console message "Error: Not enough storage is available to complete this operation". i=22
IE9 in older modes
object error. i=22.
IE8
Don't have a copy to test, but local storage is supported (http://stackoverflow.com/questions/3452816/does-ie8-support-out-of-the-box-in-localstorage)
IE7 and below
Doesn't support local storage.
You can use the below line to accurately calculate this value and here is a jsfiddle for illustration of its use
ReplyDeletealert(1024 * 1024 * 5 - unescape(encodeURIComponent(JSON.stringify(localStorage))).length);