JavaScript memory and HTML5 LocalStorage limitations on smartphones

Question

I'm going to develop web application which should work on mobile devices (smartphones). In the application the operator will input some business data, and the operator will type this data also in closed spaces, where network signal can be unavailable.

So, there is a need for offline mode. In such mode operator can input data, which will be stored on browser side, and after the network becomes available, the data will be send to the server and persisted in database.

I've found out 2 possible solutions:

1. Store the values in JavaScript memory. Will not survive browser crash or page reload.
2. Store the values in HTML5 LocalStorage. Requires browser with HTML5 support and guarantee that this storage will be persistent (no flush after closing the browser app).

Because I've not developed the web application for smartphones yet, and I have little experience with them, I have the question:

What are the JavaScript memory and HTML5 LocalStorage limitations for particular browsers on particular smartphones (Android, Windows Mobile, Windows Phone, iPhone)?

I know that theoretically HTML5 LocalStorage should be 5MB, and JavaScript memory should depend on device resources, which should be at least 5MB, but how it is for Smartphones? F.g. I've noticed on Windows Phone 6.5, that the jStorage page, using userData for older IE, is not persisting data on this device (maybe it got flushed after each page refresh, during to limited resources).

update In the answer to the question of max size of local storage values there's great link to the simple application which tests local storage limitations, and according to the test I've made, the local storage can be increased on Opera Mobile 11 without browser's limitation, the user must simply accept the request for more space. The limits are there the device's limits.

Here's the QR code to the app:

And the app itself: http://arty.name/localstorage.html

Answer 1

In my experience you can reliably bet on 5MB minimum for the platforms you mention above. Keep your data below that level and you should be pretty safe.

Read this article. http://diveintohtml5.info/storage.html it has some nice nuggets of info, but it's not all accurate, especially the part that says you cant up the limit.
I know for a fact that on iPhone once you reach the limit the phone will ask the user if they want to allow more space. (Sort of accurate, but not entirely)

On Android platforms the heap memory limit is set at 12MB. Not sure about the other platforms. Since you are going to be running in some kind of webcontainer (Webkit or other) I wouldn't worry too much about it. The containers themselves are pretty good at managing memory and implementing file caches to minimize their footprint.

I recommend you leave the memory optimizations and such for last. Who knows, you might not even need it. Dont optimize prematurely.

PS:
Look at Phonegap: http://phonegap.com/

Answer 2

just tested out your link: check localstorage

• Chrome 16.0.912
• iPad2 IOS 5.0.1
• iPhone 3GS

all go until 2.600.000 characters. Since UTF-8 has 4 bytes just multiply it by four and you get the total bytes.

10400000 bytes = 9,918 MegaBytes