javascript - How can I request an increase to the HTML5 localstorage size on iPad, like the FT web app does?

Question

If you open http://app.ft.com (the Financial Times mobile web app), you are prompted to add the app to your "home".

After doing this, when you open the app, you are prompted again to allow the localstoreage database size to be increased up to 50MB.

• How can this be done? Is there some JavaScript API call? Permissions or whatever?
• Is this iPad (iOS?) specific, or does it work on other Webkit browsers?

Answer 1

I happen to know something about this ;)

There's no API for requesting an increase in storage size for an existing database. There is one way to force an increase: write data to the database in such a size that an increase is required, prompting the user. However, this would be slow and there's no way to tell the currently allocated space, so it's not recommended.

Black Frog has part of this correct: the only neat way to do this is to request a very large database when it is opened, for example:

openDatabase('databaseName', '1.0', 'My Database', 50*1024*1024, …

… to request 50MB of space.

However, when the user first visits the site, you may not want to prompt them about a 50MB limit at once; so you might think that you could ask for 5MB at first, and then later re-open it with 50MB? Unfortunately, this doesn't work - the second open attempt, with an increased quantity, succeeds silently, not prompting for a size increase and not actually increasing the available size.

The FT app therefore starts off with a 5MB "preview" database, so that the user isn't prompted on first load. It tries not to exceed this 5MB limit, as any space assigned has to be shared across all databases.

If the user chooses to allow storage of more content, the app then tries to open a database with a different name with 40MB of space (for which the user is prompted to approve 50MB). This allows 40MB in that database, and 5MB in the original preview database, so neither should fail when inserting rows - as 50MB total is currently the limit on iOS.

All browsers currently handle database space limits differently, so if you're planning cross-platform, test carefully. Desktop Safari handles it rather nicely, allowing much larger; Chrome doesn't allow any increase at all; etc. Expect all "HTML5" implementations to differ in strange ways :)