I need a way to find the total size taken by an application using HTML5 sessionStorage/ localStorage at run time.

I don't want profiler-based approaches.

What I'm currently doing is -

var data = 0;
for(var v in window.sessionStorage){
 data += window.sessionStorage.getItem(v); 
}

console.log(data);//.length to get char length

And then I copy-paste this value into a text-file and check the size.

Ugly and still doesn't help me either. Is there a way (any method) in the HTML5 API's that have this in-built?

Thank you.

I need a way to find the total size taken by an application using HTML5 sessionStorage/ localStorage at run time.

I don't want profiler-based approaches.

What I'm currently doing is -

var data = 0;
for(var v in window.sessionStorage){
 data += window.sessionStorage.getItem(v); 
}

console.log(data);//.length to get char length

And then I copy-paste this value into a text-file and check the size.

Ugly and still doesn't help me either. Is there a way (any method) in the HTML5 API's that have this in-built?

Thank you.

• javascript
• html
• local-storage

• since this is stringified data.length should at least give you the number of characters. – Christoph Commented Jul 23, 2012 at 13:51
• @Christoph: Yes, as I have already mentioned in my question. Are you suggesting multiplying it by some assumed byte weightage per character? – Robin Maben Commented Jul 23, 2012 at 14:59

2 Answers 2

No, not cross browser. IE sort of has it, the others don't. But of course, remaining size left on the domain can be calculated. See below examples.

For IE only:

var remSpace = window.localStorage.remainingSpace;

For FF/Chrome/Safari:

 var limit = 1024 * 1024 * 5; // 5 MB
 var remSpace = limit - unescape(encodeURIComponent(JSON.stringify(localStorage))).length;

Opera: 5 MB is standard but the browser offers to increase limit as applications require more space.

I found this question while trying to find my own solution to this problem and wanted to share where I ended up, just in case it may prove helpful for others.

The short of it, is that when I add a value to localStorage, I put its key in an array. Then, before writing something else to localStorage, I loop through the keys and get a sum of their lengths to be sure I'm not over a threshold that I'm comfortable with.

If localStorage is larger than 2Mb (in this case), then it removes the first item from localStorage, removes that entry from the array, and then writes the new entry.

// check the size of localStorage

var localStorageArray = [];
var localStorageSize = 0;

for ( var i=0; i < localStorageArray.length; i++ ) {
    localStorageSize += localStorage.getItem(localStorageArray[i]).length;
}

// save to localStorage if it has not been saved already

if ( !localStorage.getItem(key) ){
    if ( localStorageSize < 2000000 ) {
        localStorage.setItem(key, value);
        localStorageArray.push(key);
    } else {
        localStorage.removeItem(localStorageArray[0]);
        localStorageArray.shift();
        localStorage.setItem(key, value);
        localStorageArray.push(key);
    }
}