Solved

Hitting JS localStorage Limit after just 0.3MB

Posted on 2011-03-25
4
540 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

739 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