Html5 web storage

692
-1

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
692
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×