Solved

Hitting JS localStorage Limit after just 0.3MB

Posted on 2011-03-25
4
543 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

623 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