Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 web storage

HTML5 web storage, a better local storage than cookies. Learn how web pages can store data locally within the user's browser.

  • Be the first to comment

Html5 web storage

  1. 1. Mindfire - Internal Training & Seminar 1 HTML5 Web Storage [using HTML5 storage instead of cookies] Jyotirmaya Dehury Mindfire Solutions
  2. 2. Mindfire - Internal Training & Seminar 2 Agenda ● - A Brief on Cookies ● - How Cookies Work ● - The Limitations of Cookies ● - A Brief Introduction to HTML5 Web Storage ● - Web Storage Strengths ● - Web Storage Weaknesses ● - Web Storage APIs ● - Demo ● - Web Storage Events ● - Browser Support
  3. 3. Mindfire - Internal Training & Seminar 3 Cookie? A cookie is a small piece of information or variable that is stored on the visitor's computer.
  4. 4. Mindfire - Internal Training & Seminar 4 Cookie? A cookie is a small piece of information or variable that is stored on the visitor's computer. They store this information to allow a site to provide a more personalized experience in ways such as: ● Tracking User Preferences ● Logged in Status / Last logged in ● Last page viewed ● Page view count ● Track advertisements ● Retain state about a shopping cart
  5. 5. Mindfire - Internal Training & Seminar 5 How Cookies Work? ● Server sends some data to the visitor's browser in the form of a cookie. ● The browser storesthe same as a plain text record on the visitor's hard drive. ● Now, when the visitor arrives at another page on the same site, the browser sends the same cookie to the server for retrieval. ● Once retrieved, your server knows/remembers what was stored earlier.
  6. 6. Mindfire - Internal Training & Seminar 6 The Limitations of Cookies ● Cookies have data-capacity limitations. The data storage limit of cookies in many web browsers is about 4 KB per cookie. ● Most browsers allow limited no. of cookies per domain. ● Cookies are always sent with every HTTP request (usually even for images) resulting in more data being sent to server. ● Privacy and Security issues.
  7. 7. Mindfire - Internal Training & Seminar 7 Introduction to HTML5 Web Storage ● HTML5 introduces Web Storage as an alternative to Cookies. ● This storage comes in two flavors: local storage and session storage. ● LocalStorage: Key-Value pair Exists until it is removed or expired, and available accross multiple tabs. ● SessionStorage: Key-Value pair Once the window or tab is closed, the information stored is erased.
  8. 8. Mindfire - Internal Training & Seminar 8 Web Storage Strengths ● The ease of use for developers: It has a simple API to get and set key/value pairs and can do much more. ● The amount of space it provides: no less than 5 or 10 MB to be stored per domain. ● Data transmission: Objects are not sent automatically with each request but must be requested. ● Client side access: Servers cannot directly write to web storage which provides some additional controls from client-side scripting. ● 'storage' event can be utilized. ● The localStorage object stores the data with no expiration date.
  9. 9. Mindfire - Internal Training & Seminar 9 Web Storage Weaknesses ● Data is stored as a simple string ● It has a default 5mb limit; more storage can be allowed by the user if required. ● It can be disabled by the user or systems administrator ● Storage can be slow with complex sets of data
  10. 10. Mindfire - Internal Training & Seminar 10 Web Storage APIs ● localStorage.setItem(key, value) : Adds an item to storage ● localStorage.getItem(key) : Retrieves an item from storage ● localStorage.removeItem(key) : Removes an item from storage ● localStorage.clear() : Clears all records out of Storage ● localStorage.key(n) : Returns the name of the key for the index provided. ● localStorage.length : Number of key/value pairs in the storage list
  11. 11. Mindfire - Internal Training & Seminar 11 Web Storage Events ● Whenever we store data in localStorage, the storage event is fired in other browser windows/tabs. ● If the user has the same site open in different tabs, this event can be used to synchronize the data. (This was actually quite an issue with cookies.) window.addEventListener('storage', function(event) { console.log ('The value for ' + event.key + ' was changed from' + event.oldValue + ' to ' + event.newValue); }, false);
  12. 12. Mindfire - Internal Training & Seminar 12 Browser Support
  13. 13. Mindfire - Internal Training & Seminar 13