Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Hitting JS localStorage Limit after just 0.3MB

Posted on 2011-03-25
4
Medium Priority
?
546 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

670 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