This document discusses HTML5 local storage. It allows data to be stored locally within the user's browser. It can store large amounts of data securely and faster compared to cookies. Local storage works across page refreshes and supports events. It is useful for temporary game states, offline browsing, and syncing data when the network fails. The document demonstrates how to check for local storage support and use it to store, retrieve, and remove key-value pairs of data locally in the browser. It also covers handling local storage events.

1. HTML5 Local Storage
By: Arif Mahmud Rana
Web Developer Technobd

2. What is HTML5 Local Storage?
• store data locally within the user's browser
• stored in name/value pairs

3. Advantages
• secure and faster
• store large amounts of data
• browser support
• event support
• prevent work loss from network disconnects

4. Disadvantages/Limitation
• security
• browser support
• cache clear
• size

5. When To Use ?
• temporary state for game
• offline browsing
• data sync when network fail

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. How to Use(Cont.)
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML
=localStorage.getItem("lastname");

8. How to Use(Cont.)
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML
=localStorage.lastname;

9. How to Use(Cont.)
// Remove
localStorage.removeItem("lastname");
or
delete localStorage.lastname;
or
localStorage.clear("lastname");
// Remove All
localStorage.clear();

10. Event
if (window.addEventListener) {
window.addEventListener("storage",
handle_storage, false);
} else {
window.attachEvent("onstorage",
handle_storage);
};

11. Event(Cont.)
function handle_storage(e) {
if (!e) { e = window.event; }
}

12. Event(Cont.)
STORAGEEVENT OBJECT

13. Q & A

14. Thanks

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/