Solved

Hitting JS localStorage Limit after just 0.3MB

Posted on 2011-03-25
4
536 Views
Last Modified: 2012-05-11
I am writing a JavaScript application in which I want to store a text file with about 1.7MB of data locally (specifically, the ENABLE word list for Scrabble). Having read up on the options for local storage, the localStorage API seems to be the most cross-browser compatible way to store that amount of data so I wrote code to download the data with an AJAX call to a text file, and write it to the localStorage object. It kept failing so I put some error checking in and realised I was hitting the storage size limit - but after writing only a fraction of a 1.7MB file to the storage object, despite every documentation site saying the limit is typically 5MB, or at the very least, 2.5MB when the data is saved as UTF-8 encoding, yet I'm hitting this limit after 0.3MB (300,000 characters) in Firefox and 0.6MB (600,000 characters) in Google Chrome - so, my question is, WTF?
var i = 0, n = 0;
localStorage.clear();
try {
    //t.responseText is the result of an AJAX call to a 1.7MB text file. It is a string 1,743,327 characters in length.
    while (n < t.responseText.length) {
        localStorage.setItem('dict' + i, t.responseText.substr(n, n + 100000)); i++; n += 100000;
    }
} catch(e) {
    //In Firefox, n is 300,000 - in Chrome it's 600,000
    alert('Died after writing ' + n + ' characters :' + e.message);
}

Open in new window

0
Comment
Question by:wwarby
  • 4
4 Comments
 
LVL 1

Author Comment

by:wwarby
ID: 35219352
Hold on to your responses for a minute. I have a very obvious bug in the above code block - each "chunk" is supposed to be 100,000 characters but is actually incrementing each time. Let me just clarify exactly what the problem is with that bug removed and post back.
0
 
LVL 1

Author Comment

by:wwarby
ID: 35219405
Okay, this is a Firefox-only problem (the newly release Firefox 4). I had a problem with Firefox and in trying to diagnose it by breaking the string into a chunks, I inadvertently broke it on every other browser. Once I fixed the code as below, it works fine in every browser except Firefox 4 (not sure about earlier versions of Firefox yet), but Firefox 4 still hits it's storage limit at 700,000 bytes (0.7MB). If I take out the "chunking" and just drop the whole of t.responseText into a localStorage variable, it refuses to save it at all, so Firefox is definitely refusing to save 1.7MB of data into localStorage in any way shape or form - at least for me.
var i = 0, n = 0;
localStorage.clear();
try {
    //t.responseText is the result of an AJAX call to a 1.7MB text file. It is a string 1,743,327 characters in length.
    while (n < t.responseText.length) {
        localStorage.setItem('dict' + i, t.responseText.substr(n, 100000)); i++; n += 100000;
    }
} catch(e) {
    //In Firefox, n is 300,000 - in Chrome it's 600,000
    alert('Died after writing ' + n + ' characters :' + e.message);
}

Open in new window

0
 
LVL 1

Accepted Solution

by:
wwarby earned 0 total points
ID: 35219486
Solved it myself. I think I had something lingering in globalStorage in Firefox from earlier work on the code - when I fully cleared down the cache in my Firefox browser and reloaded, it worked fine.
0
 
LVL 1

Author Closing Comment

by:wwarby
ID: 35219488
Solved my own problem before any answers were posted.
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now