Html5-Web-Storage

310 views
246 views

Published on

HTML5 Web Storage is a way for web pages to store named key/value pairs locally, within the client web browser. Like cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, or what have you. Unlike cookies, this data is never transmitted to the remote web server (unless you go out of your way to send it manually). Unlike all previous attempts at providing persistent local storage, it is implemented natively in web browsers.

Published in: Software
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
310
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Html5-Web-Storage

  1. 1. Web Storage Presenter: Vinod Mohan
  2. 2. Presenter: Vinod MohanPresenter: Vinod Mohan What is Web Storage? Web storage and DOM storage (document object model) are web application software methods and protocols used for storing data in a web browser. Web storage supports persistent data storage, similar to cookies but with a greatly enhanced capacity and no information stored in the HTTP request header.
  3. 3. Presenter: Vinod Mohan Why Store Data in Web Browser The main reason is practicality. JavaScript code running on the browser does not necessarily need to send all information to the server. There are several use cases: ● You want to increase performance. You can cache data client-side so it can be retrieved without additional server requests. ● You have a significant quantity of client-side-only data, e.g. HTML strings or widget configuration settings. ● You want you make your application work off-line.
  4. 4. Presenter: Vinod MohanPresenter: Vinod Mohan What we are using now? Cookies:- Cookies were invented early in the web’s history, and indeed they can be used for persistent local storage of small amounts of data. Cookies are domain-specific chunks of data. They sound tasty, but handling is awkward.
  5. 5. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan How Cookies work? ● Server sends some data to the visitor's browser in the form of cookie. ● The browser stores the same as plain text record on the visitor's hard drive. ● Now, When the visitor arrive at the another page on the same site, the browser sends the same cookie to server for retrival. ● Once retrived, your server knows/remembers what was stores earlier
  6. 6. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan The Limitations of Cookies ● Cookies are included with every HTTP request, thereby sending data unencrypted over the internet(unless SSL verified) and transmitting the same data over and over ● Cookies have data limitations, about to 4KB per cookie ● Most browers allowed limited number of cookies per domain. ● Privacy and Security issues
  7. 7. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan What we really want is? ● Lot of storage space. ● Data should persists beyond a page refresh. ● Data should not be transmitted to server ● On the Browser
  8. 8. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Introducing HTML5 Web Storage HTML5 Web Storage is a way for web pages to store named key/value pairs locally, within the client web browser. Like cookies, this data persists even after you navigate away from the web site, close your browser tab, exit your browser, or what have you.
  9. 9. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Browser support
  10. 10. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Before HTML5 ● At first, Started in IE. Microsoft invented a great many things, DHTML Behaviors(userData). UserData allows 64 KB per domain. ● In 2002, Adobe introduced flash cookies in flash environment, properly known as Local Shared Object allows upto 100 KB of data per domain. ● Brad Neuberg developed an early prototype of a Flash to-JavaScript bridge called AMASS (AJAX Massive Storage System), but it was limited by some of Flash’s design quirks.
  11. 11. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Before HTML5 continued ● By 2006, with the advent of ExternalInterface in Flash 8, accessing LSOs from JavaScript became an order of magnitude easier and faster. ● Brad rewrote AMASS and integrated it into the popular Dojo Toolkit under the moniker dojox.storage. Flash gives each domain 100 KB of storage “for free”. ● In 2007, Google launched Gears, provided an API to an embedded SQL database based on SQLite.
  12. 12. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Web Storage types Web Storage comes in two flavours and both uses the Key-value pair combination, 1. Local Storage, Exists untill it is removed or expired and available across multiple tabs 2. Session Storage, Once the window or tab is closed, the data stored is erased.
  13. 13. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Web Storage Strengths ● The ease of use for developers: It has a simple AOI to get and set key/value pairs and can do much more. ● The amount of space provided: no less than 5 or 10 MB per domain. ● The LocalStorage object stores data with no expiration. ● Clent- Side Access: Servers cannot directly write into web storage. ● Data transmission: Objects are not sent automatically with each request but must be requested.
  14. 14. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Web Storage Weaknesses ● Data is stored as a simple string. ● It has default 5 MB limit; more storage can be allowed by user if required. ● It can be disabled by the user or systems administrator. ● Storage can be slow with complex sets of data
  15. 15. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Web Storage APIs ● setItem(Key, Value) – Adds an item to storage ● getItem(Key) - Retrives an item from storage ● removeItem(Key) – Removes an item from storage ● Clear() - Removes all items from storage ● key(n) - Returns the name of the key for the index provided ● Length - Number of key/value pairs in the storage list
  16. 16. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan How to check browser supports or not? // is localStorage available? if (typeof window.localStorage != "undefined") { alert(“Storage is working.”); } else { alert(“Storage is not working.”) } You can download JS at http://modernizr.com/
  17. 17. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Working of setItem(key, value) // is localStorage available? if (typeof window.localStorage != "undefined") { // Local storage localStorage.setItem("hello", "Hello World!"); //Session storage sessionStorage.setItem("hello", "Hello World!"); } else { alert(“Storage is not working.”) }
  18. 18. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Working of getItem(key) // is localStorage available? if (typeof window.localStorage != "undefined") { // Local storage var local = localStorage.getItem("hello"); alert(hello + “from Local Storage”); //Session storage var session = sessionStorage.setItem("hello"); alert(hello + “from Session Storage”); } else { alert(“Storage is not working.”) }
  19. 19. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Working of removeItem(key) // is localStorage available? if (typeof window.localStorage != "undefined") { // Local storage localStorage.removeItem("hello"); //Session storage sessionStorage.removeItem("hello"); } else { alert(“Storage is not working.”) }
  20. 20. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Working of clear, key & Length //to clear all localStorage.clear(); //to read all for (var i = 0; i < localStorage.length; i++) { var key = localStorage.key(i); var data = localStorage[key]; console.log(data); }
  21. 21. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Storage Event ● When ever we store data in local storage, event is fired in other windows/tabs ● This event can be used to synchronice the data in defferent tabs Syntax: window.addEventListener('storage', function(event) { console.log('The value for '+event.key+' changes from '+event.oldValue+' to '+event.newValue); }) ; Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Storage Event ● When ever we store data in local storage, event is fired in other windows/tabs ● This event can be used to synchronice the data in defferent tabs Syntax: window.addEventListener('storage', function(event) { console.log('The value for '+event.key+' changes from '+event.oldValue+' to '+event.newValue); }) ;
  22. 22. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan References Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan ● http://www.sitepoint.com/html5-web-storage ● http://www.html5rocks.com/en/features/storage ● http://diveintohtml5.info/storage.html Examples: ● http://www.ellipsetours.com/Demos/storage/ ● http://html5demos.com/storage
  23. 23. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan
  24. 24. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan Thank You Email: vinodm@mindfiresolutions.com, Skype: mfsi_vinodm, Mob No: +91 – 9620453625. Presenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod MohanPresenter: Vinod Mohan

×