HTML5 Storage - Suggestions for Challenges

1. HTML5 Storage -
Suggestions for Challenges
Client side storages, making
applications powerful, faster and
work offline.

2. Web Storage
Questions striking our mind??
● What is it?
● What we were using before it?
● Why should we use it now?
● Are they sufficient enough for our
application?

3. What is web storage?
● Client-side storag
● A standardized and native API that works
the same way on any browser.
● Originally included in the Web
Applications 1.0 specification, it has now
its own specification called W3C Web
Storage.

4. What we were using before it?
● Cookies for client storage.
● Cookies sent in every HTTP request.
● Data sent unencrypted.
● Size is very small (approximately 4KB).
● Limited number of cookies stored per domain.

5. Why should we use it now?
● Data not included with every request, but
used only when asked for.
● Store large data(5MB approx.), without
affecting performance.
● Data stored in key/value pairs and a page
can only access data stored by itself.

6. Types of Web Storage
● Local Storage
○ Data stored is available to all scripts within
domain and persist even after browser is
closed.
● Session Storage
○ Data stored is available only to the script
that stored the data and data is lost on
closing of browser.

7. Are they sufficient enough for our
application?
● Works fine with application with less client side data
storage and manipulation.
● Complex to manipulate data using javaScript at client
side when data is in bulk.
● Due to manual manipulation, high chances of poor
performance and browser compatibility

8. Browser Support for Web Storage
● IE 8.0 and 9.0
● Firefox 3.0, 3.5, 3.6 and 40
● Safari 4.0, 5.0 and 6.0
● Chrome 5.0, 6.0, 7.0, 8.0 and 9.0
● Opera 10.5, 10.6 and 11.0
● iOS Safari 3.2, 4.1 and 4.2
● Android browser 2.2

9. What are its alternatives?
● Client side structured storage (database).
● WebSQL Database (Sqlite).
● Indexed DB.

10. Web SQL Database
● A real, relational database implementation
on the client(SQLite).
● No need to write browser dependent
code.
● Pure SQL Query.
● But, the specification is depricated.
● Need to transform JavaScript objects into
relational schema.
● Not object driven.

11. Indexed DB
● Allows fast indexing and searching of objects.
● A NoSQL database works directly with
JavaScript Objects.
● Works in asynchronous mode. This allows to
work inside event driven module of JavaScript.
● Cursor API's, Key Range APIs, and Application
Code for Query Mechanism
● Need to write browser dependent code at some
instance for smooth performance.

12. Browser Compatibility for both Databases
● WebSQL
○ Chrome 4+
○ Safari 4+
○ Opera 11+
○ iOs 5+
○ Android 3+
● Indexed DB
○ Chrome 11+
○ Firefox 4+
○ I.E 10

13. Application Cache??
● ApplicationCache- HTML5 interface for
caching.
● Offline browsing- users can navigate your
full site when they're offline.
● Speed-cached resources are local, and
therefore load faster.
● Reduced server load- the browser will only
download resources from the server that
have changed.

14. Some details
● Works on one manifest file.
● Need to add mimetype to server.
● Three major sections
a. CACHE
b. NETWORK
c. FALLBACK

15. Browser Compatibility
● Application Cache (appCache)
○ Chrome 4+
○ Safari 4+
○ Opera 11+
○ Firefox 4+
○ I.E 10
○ iOs 5+
○ Android 3+
○ Opera Mobile 11+

16. Discussion !!
● It seems that after using these things in
our application (as per required) we can
make application work offline. ri8??
● Your opinion ??

17. Experience sharing
● Offline Application requirement.
● Can be achieved.
● Required : no user dependency at all.
● Problem with the current technology !!

18. Experience sharing(Contd...)
● Ultimately "old is gold." Java Applet was
the solution for me.
● Still problem with some cases.
● Issue 1: registered as a bug in java
official forum.
● Issue 2: Cannot access the close of
browser.

19. Some more problems.
● Theoretically speaking javascript works fine for
every browser.
● True, but sometimes behaviour slightly differs.
● Majority cases css issues with browsers.
● Eg.Difference in look of gmail in chrome and firefox
(have a look at scrollbar :) )

20. Questions ??
Feel free to ask.

21. Thanks...