HTML5 Offline Storage Options

Question

Recently, my fellow developer started working in a new company, and one of his tasks is to create a new web application that allows its users to work offline when their employees are in place at remote locations, and then later to synchronize with the database on the server side, from which they have not yet determined the server-side provider (I assume it will be SQL Server).

I looked around a bit and it seems that there are two viable options - LocalStorage and IndexedDb, with LocalStorage being a more popular technology? They want to go to HTML5 and that is all beautiful and dandy, but a long story, my question is / is ...

• What are the options for offline data storage in HTML5?
• Are there any older solutions that have better support?
  • Are these methods less risky?
  • less time to implement?

The concept of offline storage of data in a web application does not seem to be a new idea, but at the same time in the latest technologies (html5, asp.net 4.0 / 4.5) you begin to fall into a rarely explored territory.

• What are some things that your company may be working on and what is not working?

Any reasonable evidence-based evidence is likely to get my advance, so don't just rush to get the first answer and try to get some quick points, I'm looking for good good feedback here. Thanks.

Answer 1

There are several possibilities for offline storage in HTML5: Web Storage Database Web SQL IndexedDB File System API

You have a very good presentation of all of these options here:

http://www.html5rocks.com/en/tutorials/offline/whats-offline/#toc-older-storage

Compared to the older options (Cookies, plugin-based storage, browser-specific features), I will quote from an article:

“The new storage APIs, which we might call the HTML5 repository, are generally superior in terms of openness and standards compliance. Of course, not all browsers include all new APIs, and you may need to support older browsers that don’t include none of them. Thus, old methods are still useful for graceful degradation. "

Other useful links:

http://php-html.net/tutorials/html5-local-storage-guide/

http://www.tutorialspoint.com/html5/html5_web_sql.htm

Hope this helps ...

Answer 2

I think your best bet is to use local storage with its most widely used standard for storage options available under HTML5.

IndexedDB has been over-designed (in my opinion) and is not supported (yet) for all Mozilla requirements, which is better than sliced ​​bread , and the future of WebSQL looks a bit uncertain since Mozilla refuses to implement it and it is no longer processed due to a deadlock between W3C and the browser providers that actually implemented it (Chrome / Safari / Opera).

Currently, there is a battle of browser explosion due to the introduction of smartphones, so it is difficult to determine which part of the market supports HTML5 LocalStorage functions, but using statcounter I was able to calculate between Chrome (4+), Firefox (3.+), Safari (4+) , Opera (10.5+) and IE (8+), including iPhone and Android devices that you have captured about 80-85% of the market, and this figure will grow at a speed of 1-2% per month. The rest is IE 6/7 (which stubbornly tends to hang), older versions of new browsers (with update features that usually kept them current), and some mobile browsers got stuck in the Stone Age.

As for the older options, I would add Saving user data for IE6 / 7 to the list provided by @ user998692, but one way or another it will get bogged down with a lot of problems with browser incompatibility and support for hij technology, which will complicate your code base and testing, and accordingly increase delivery times (and cost). However, if you want to go this route, I would recommend you take a look at PersistJS , because the guys who built it did a lot of the work that you will need already.

These days, it’s worth looking more forward (at how the market will look in 1-2 years, when your application will be distributed and get a wide user base) than back, so I would say that HTML5 LocalStorage is probably an option.