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

by

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 🙂

More Related Contents:

  1. how to store new elements added in webpage by user? [closed]
  2. How to store objects in HTML5 localStorage
  3. What is the max size of localStorage values?
  4. HTML5 Local storage vs. Session storage
  5. How to save an image to localStorage and display it on the next page?
  6. When do items in HTML5 local storage expire?
  7. JavaScript; communication between tabs/windows with same origin [duplicate]
  8. In HTML5, is the localStorage object isolated per page/domain?
  9. How to check whether a Storage item is set?
  10. Get HTML5 localStorage keys
  11. How to delete a localStorage item when the browser window/tab is closed?
  12. html5 localStorage error with Safari: “QUOTA_EXCEEDED_ERR: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota.”
  13. HTML5 Canvas drawImage ratio bug iOS
  14. HTML5 Local Storage fallback solutions [closed]
  15. Programmatically selecting text in an input field on iOS devices (mobile Safari)
  16. Looping through localStorage in HTML5 and JavaScript
  17. Scope of sessionStorage and localStorage
  18. How to detect a long touch pressure with javascript for android and iphone?
  19. How to find the size of localStorage
  20. localStorage access from local file
  21. Prevent orientation change in iOS Safari
  22. How do I save and restore a File object in local storage
  23. Javascript/HTML Storage Options Under File Protocol (file://)
  24. How can I serialize a function in JavaScript?
  25. Can I use Javascript to get the compass heading for iOS and Android?
  26. JavaScript localStorage object broken in IE11 on Windows 7
  27. Saving and loading an image from localStorage
  28. Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
  29. Prevent iOS bounce without disabling scroll ability
  30. Is there a way to increase the size of localStorage in Google Chrome to avoid QUOTA_EXCEEDED_ERR: DOM Exception 22

Leave a Comment