4

I'd like to store local data on the client side to speed up page loads of my web-app. I tried with HTML5's localStorage but unfortunately it's too small for my needs. Is there anything bigger?

Incognito
  • 20,537
  • 15
  • 80
  • 120
RMinelli
  • 171
  • 2
  • 13
  • 3
    How much space do you need, what kind of data is it? – DCoder Apr 29 '12 at 13:01
  • Hi, the optimal value would be smth around 50Mb. Are JSONs object. I played with JSON.stringify and JSON.parse. LocalStorage would have been perfect, but 2.5Mb are useless.. – RMinelli Apr 29 '12 at 13:18
  • 3
    JSON is not a very space-efficient storage format, but changing that won't take you from 50mb down to 2.5. That's really a large amount of stuff to keep on client machines, esp. considering mobile platforms. – Pointy Apr 29 '12 at 13:19
  • I know. Supposing I don't care about mobile platforms. How could I achieve such a storage? The thing is that I'm generating visualizations from JSON objects, and I've a lot of them (about 10k), sometimes for a viz 1k objects are needed and I've to fetch those from the server (i.e., using d3.json) and this is slow... – RMinelli Apr 29 '12 at 13:23
  • 2
    WebSQL or IndexedDB might help, but that's still a lot of data to push to the client. – DCoder Apr 29 '12 at 13:25
  • Having the data stored in CouchDB could help? Instead of using the d3.json requests I could create views on the DB to get my data. Would this speed up things? I tried once setting up the DB but I ended up w/ Same-Origin Policy issues :/ – RMinelli Apr 29 '12 at 13:33
  • @RMinelli Make sure you're using a JSONP request if you're using CouchDB. – Michael Mior Apr 29 '12 at 13:35
  • 3
    similar question: http://stackoverflow.com/questions/6276282/how-can-i-request-an-increase-to-the-html5-localstorage-size-on-ipad-like-the-f – wal Apr 29 '12 at 14:07
  • +1 for wal. have a look at lawnchair too if you want to make sure you support multiple browsers:http://bit.ly/IvTfzv – smnbss Apr 29 '12 at 15:43

2 Answers2

1

You have several options, but browser support differs and as such you will need to abstract the differences away from the browser by an extra layer on top of the various browser mechanisms

Local Storage is supported by pretty much everything, and normally stores 5-10MB. IndexedDB is supported by most, but not all desktop browsers and can store lots more data. How much depends on the browser, but expect something like 50MB or unlimited. WebSQL is the only way to go if you aim for iOS and Android browsers, as they don't support indexeddb. You can store up to 50MB there.

Elegant abstraction layers that does all of this for you are many: check out the answers in this thread.

Community
  • 1
  • 1
oligofren
  • 20,744
  • 16
  • 93
  • 180
0

If the data is static in nature you might be able to cache some in a .js file or use jsonp instead of local storage.

Otherwise your only option right now is local storage with a storage limit of 5 - 10 megabytes depending on the browser. You might be able to get more out of this by compressing your data with something like this: https://github.com/olle/lz77-kit/blob/master/src/main/js/lz77.js

Kenneth Spencer
  • 1,392
  • 12
  • 15