Solved

Hitting JS localStorage Limit after just 0.3MB

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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)

770 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