HTML5 Local Storage
By: Arif Mahmud Rana
Web Developer Technobd
What is HTML5 Local Storage?
• store data locally within the user's browser
• stored in name/value pairs
Advantages
• secure and faster
• store large amounts of data
• browser support
• event support
• prevent work loss from ne...
Disadvantages/Limitation
• security
• browser support
• cache clear
• size
When To Use ?
• temporary state for game
• offline browsing
• data sync when network fail
How to Use
check for HTML5 Storage :
function supports_html5_storage() {
try {
return 'localStorage' in window &&
window['...
How to Use(Cont.)
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerH...
How to Use(Cont.)
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML
=local...
How to Use(Cont.)
// Remove
localStorage.removeItem("lastname");
or
delete localStorage.lastname;
or
localStorage.clear("l...
Event
if (window.addEventListener) {
window.addEventListener("storage",
handle_storage, false);
} else {
window.attachEven...
Event(Cont.)
function handle_storage(e) {
if (!e) { e = window.event; }
}
Event(Cont.)
STORAGEEVENT OBJECT
Q & A
Thanks
Reference
• http://diveintohtml5.info/storage.html
• http://www.w3schools.com/html/html5_web
storage.asp
• http://coding.s...
Upcoming SlideShare
Loading in …5
×

Html5 local storage

443 views
323 views

Published on

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

  • Be the first to like this

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

No notes for slide

Html5 local storage

  1. 1. HTML5 Local Storage By: Arif Mahmud Rana Web Developer Technobd
  2. 2. What is HTML5 Local Storage? • store data locally within the user's browser • stored in name/value pairs
  3. 3. Advantages • secure and faster • store large amounts of data • browser support • event support • prevent work loss from network disconnects
  4. 4. Disadvantages/Limitation • security • browser support • cache clear • size
  5. 5. When To Use ? • temporary state for game • offline browsing • data sync when network fail
  6. 6. How to Use check for HTML5 Storage : function supports_html5_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; } }
  7. 7. How to Use(Cont.) // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML =localStorage.getItem("lastname");
  8. 8. How to Use(Cont.) // Store localStorage.lastname = "Smith"; // Retrieve document.getElementById("result").innerHTML =localStorage.lastname;
  9. 9. How to Use(Cont.) // Remove localStorage.removeItem("lastname"); or delete localStorage.lastname; or localStorage.clear("lastname"); // Remove All localStorage.clear();
  10. 10. Event if (window.addEventListener) { window.addEventListener("storage", handle_storage, false); } else { window.attachEvent("onstorage", handle_storage); };
  11. 11. Event(Cont.) function handle_storage(e) { if (!e) { e = window.event; } }
  12. 12. Event(Cont.) STORAGEEVENT OBJECT
  13. 13. Q & A
  14. 14. Thanks
  15. 15. Reference • http://diveintohtml5.info/storage.html • http://www.w3schools.com/html/html5_web storage.asp • http://coding.smashingmagazine.com/2010/1 0/11/local-storage-and-how-to-use-it/

×