SlideShare a Scribd company logo
1 of 21
HTML5 Storage -
Suggestions for Challenges
    Client side storages, making
  applications powerful, faster and
             work offline.
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?
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.
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.
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.
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.
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
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
What are its alternatives?

●   Client side structured storage (database).

●   WebSQL Database (Sqlite).

●   Indexed DB.
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.
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.
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
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.
Some details
●   Works on one manifest file.

●   Need to add mimetype to server.

●   Three major sections
    a. CACHE
    b. NETWORK
    c. FALLBACK
Browser Compatibility
●   Application Cache (appCache)

    ○   Chrome 4+
    ○   Safari 4+
    ○   Opera 11+
    ○   Firefox 4+
    ○   I.E 10
    ○   iOs 5+
    ○   Android 3+
    ○   Opera Mobile 11+
Discussion !!
●   It seems that after using these things in
    our application (as per required) we can
    make application work offline. ri8??

●   Your opinion ??
Experience sharing
●   Offline Application requirement.

●   Can be achieved.

●   Required : no user dependency at all.

●   Problem with the current technology !!
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.
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 :) )
Questions ??

 Feel free to ask.
Thanks...

More Related Content

What's hot

Tech meetup: Web Applications Performance
Tech meetup: Web Applications PerformanceTech meetup: Web Applications Performance
Tech meetup: Web Applications Performance
Santex Group
 

What's hot (20)

Tech meetup: Web Applications Performance
Tech meetup: Web Applications PerformanceTech meetup: Web Applications Performance
Tech meetup: Web Applications Performance
 
PyGrunn2013 High Performance Web Applications with TurboGears
PyGrunn2013  High Performance Web Applications with TurboGearsPyGrunn2013  High Performance Web Applications with TurboGears
PyGrunn2013 High Performance Web Applications with TurboGears
 
003. ReactJS basic
003. ReactJS basic003. ReactJS basic
003. ReactJS basic
 
Going Multi-Tenant with dotCMS
Going Multi-Tenant with dotCMSGoing Multi-Tenant with dotCMS
Going Multi-Tenant with dotCMS
 
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationWebpack and Web Performance Optimization
Webpack and Web Performance Optimization
 
Bundling & minification
Bundling & minificationBundling & minification
Bundling & minification
 
Frost - W3C Mobile Ajax Workshop 2007
Frost - W3C Mobile Ajax Workshop 2007Frost - W3C Mobile Ajax Workshop 2007
Frost - W3C Mobile Ajax Workshop 2007
 
Node js (runtime environment + js library) platform
Node js (runtime environment + js library) platformNode js (runtime environment + js library) platform
Node js (runtime environment + js library) platform
 
WordPress development checklist
WordPress development checklistWordPress development checklist
WordPress development checklist
 
Taming 3rd party content
Taming 3rd party contentTaming 3rd party content
Taming 3rd party content
 
The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...The future of web development write once, run everywhere with angular.js and ...
The future of web development write once, run everywhere with angular.js and ...
 
Introduction to maya
Introduction to mayaIntroduction to maya
Introduction to maya
 
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
MEAN Stack - Introduction & Advantages - Why should you switch to MEAN stack ...
 
Алексей Швайка "Bundling: you are doing it wrong"
Алексей Швайка "Bundling: you are doing it wrong"Алексей Швайка "Bundling: you are doing it wrong"
Алексей Швайка "Bundling: you are doing it wrong"
 
002. Working with Webpack
002. Working with Webpack002. Working with Webpack
002. Working with Webpack
 
Node js projects
Node js projectsNode js projects
Node js projects
 
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsHost, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
006. React - Redux framework
006. React - Redux framework006. React - Redux framework
006. React - Redux framework
 
Ng init | EPI Sousse
Ng init | EPI SousseNg init | EPI Sousse
Ng init | EPI Sousse
 

Similar to Html5 storage suggestions for challenges.pptx

State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 

Similar to Html5 storage suggestions for challenges.pptx (20)

Offline Web with Oracle JET
Offline Web with Oracle JETOffline Web with Oracle JET
Offline Web with Oracle JET
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
Working and Features of HTML5 and PhoneGap - An Overview
Working and Features of HTML5 and PhoneGap - An OverviewWorking and Features of HTML5 and PhoneGap - An Overview
Working and Features of HTML5 and PhoneGap - An Overview
 
JS digest. Decemebr 2017
JS digest. Decemebr 2017JS digest. Decemebr 2017
JS digest. Decemebr 2017
 
JS digest. October 2017
JS digest. October 2017 JS digest. October 2017
JS digest. October 2017
 
Refactoring to a SPA
Refactoring to a SPARefactoring to a SPA
Refactoring to a SPA
 
Refactoring to a Single Page Application
Refactoring to a Single Page ApplicationRefactoring to a Single Page Application
Refactoring to a Single Page Application
 
Introducing chrome apps (ogura)
Introducing chrome apps (ogura)Introducing chrome apps (ogura)
Introducing chrome apps (ogura)
 
DIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development todayDIGIT Noe 2016 - Overview of front end development today
DIGIT Noe 2016 - Overview of front end development today
 
Single Page Applications in Drupal
Single Page Applications in DrupalSingle Page Applications in Drupal
Single Page Applications in Drupal
 
Progressive web applications
Progressive web applicationsProgressive web applications
Progressive web applications
 
You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)You Can Work on the Web Patform! (GOSIM 2023)
You Can Work on the Web Patform! (GOSIM 2023)
 
ResourceSpace: Recent pains and future gains
ResourceSpace: Recent pains and future gainsResourceSpace: Recent pains and future gains
ResourceSpace: Recent pains and future gains
 
Apache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application DevelopmentApache Cordova, Hybrid Application Development
Apache Cordova, Hybrid Application Development
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Your browser, your storage (extended version)
Your browser, your storage (extended version)Your browser, your storage (extended version)
Your browser, your storage (extended version)
 
Full stack development
Full stack developmentFull stack development
Full stack development
 
JIO and WebViewers: interoperability for Javascript and Web Applications
JIO and WebViewers: interoperability  for Javascript and Web ApplicationsJIO and WebViewers: interoperability  for Javascript and Web Applications
JIO and WebViewers: interoperability for Javascript and Web Applications
 
Types of Web Browser
Types of Web BrowserTypes of Web Browser
Types of Web Browser
 
Why and How You Should Move from PHP to Node.js
Why and How You Should Move from PHP to Node.jsWhy and How You Should Move from PHP to Node.js
Why and How You Should Move from PHP to Node.js
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​Elevate Developer Efficiency & build GenAI Application with Amazon Q​
Elevate Developer Efficiency & build GenAI Application with Amazon Q​
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 

Html5 storage suggestions for challenges.pptx

  • 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.