CODEWITHSUNDEEP
javascripthtml
anonymous
anonymous

Reputation: 1299

How much data can a browser save in localStorage

I'm using web sql and indexeddb but as a fallback I want to use a btree/localstorage. How much data can I save in localStorage on a given browser/platform?

If no one knows is there a way to determine the size of a javascript object? e.g. JSON.stringify and then multiply by the number of characters? Then I could just write a script that writes to localStorage and reads to see if the value is there and once there is an error or the read stops working that is the magic number.

I need to test this on (ie9, ff, safari, chrome, opera, safari on ipad, androids default browser, dolphin on android, ff on android, opera on android).

If you can help me figure out how to tell the size, in bytes, of a js string then I will run the test and post the results here.

Upvotes: 32

Views: 26872

Answers (2)

anonymous
anonymous

Reputation: 1299

Thanks for the answer allaire. To get an exact answer I ended up writing a script. The ballpark results are that you get a minimum of 5MB on desktop webkit, ff, ie, opera. IE actually let me write 1GB, yes 1 GB of data.

Oddly, ff crashed when trying to write a string with a length of 742 characters but it would write a string of length 1133 characters and this was with the cache cleared so I don't know what's up with that.

~1000 character object written to different localStorage[locations]

How big of a string can a given localStorage location be?

This is a messy script but you can run the tests yourself if you want:

<!DOCTYPE />
<html>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var alphabet = "abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 123456789 {} +-=*/\'[]<>|&^%$#@!,?.";
        var i = 0;
        var curWord = "";
        var tot = 0;
        localStorage["sameSpot"] = null;
        $("#same").bind("click", function () {
            var write = function () {
                if (!localStorage["sameSpot"])
                    localStorage["sameSpot"] = alphabet[i++];
                else {
                    curWord = alphabet[i++] + localStorage["sameSpot"];
                    localStorage["sameSpot"] = curWord;
                }
                if (i == alphabet.length)
                    i = 0;
                tot++;
                $("#local").html(curWord);
                $("#memory").html(localStorage["sameSpot"]);
                $("p").html("The number of characters written to localStorage[\"sameSpot\"] is: " + tot);
                setTimeout(write, 1);
            };
            write();
        });


        var tot2 = 0;
        var totChars = 0;
        $("#different").bind("click", function () {
            var write = function () {
                var saveObj = {
                    alphabet: alphabet + alphabet + alphabet + alphabet + alphabet + alphabet + alphabet + alphabet + alphabet + alphabet + alphabet + alphabet,
                    date: new Date(),
                    random: Math.random()
                };
                saveObj = JSON.stringify(saveObj);
                totChars += saveObj.length;
                localStorage["t" + tot2] = saveObj;
                $("#local").html(saveObj);
                $("#memory").html(localStorage["t" + tot2]);
                tot2++;
                $("p").html("The number of unique entries made in localStorage[0++] is " + tot2 + " and the total number of characters is: " + totChars + " with an average of " + Math.floor(totChars / tot2) + " characters per record");
                setTimeout(write, 1);
            };
            write();
        });
    });
</script>
<body>
<button id="same">Write Chars To Same Spot</button>
<button id="different">Write Chars To Same Spot</button>
<br />
<p></p>

<textarea rows="50" cols="100" id="memory"></textarea>
<textarea rows="50" cols="100" id="local"></textarea>
</body>
</html>

Upvotes: 59

allaire
allaire

Reputation: 6045

From Wikipedia:

Storage Size Web storage provides far greater storage capacity (5MB per domain in Mozilla Firefox,[6] Google Chrome, and Opera, 10MB per storage area in Internet Explorer[7]) compared to 4KB (around 1000 times less space) available to cookies.

window.localStorage (from http://msdn.microsoft.com/en-us/library/cc197062(v=vs.85).aspx)

The localStorage attribute provides persistent storage areas for domains. It allows Web applications to store nearly 10 MB of user data, such as entire documents or a user's mailbox, on the client for performance reasons.

Upvotes: 18

Related Questions