Monday 20 July 2015

Local web storage javascript tricks

HTML5 provide us these 2 objects in order to store some data in client side.
Sessionstorage and localstorage:-There are basically two types of Web Storage so far, and these are the localStorage, and the sessionStorage. The main difference is that the localStorage persists over different tabs or windows, and even if we close the browser, accordingly with the domain security policy and user choices about quota limit.

Cookies:-An HTML 5 cookie is a cookie-like storage options available in HTML 5. It consists of browser-based local storage and session storage, which is created and accessible by the Web page itself.

An HTML5 cookie is also known as HTML5 Web storage and is an alternative to the commonly used browser cookie.



The API for localStorage and sessionStorage is exactly the same, and distills down to the following methods:
.setItem(key, value);
.getItem(key)
.removeItem(key)
.clear()
.key(index)
.length


Example:
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
 // Check browser support
 if (typeof(Storage) != "undefined") {
 // Store
 localStorage.setItem("firstname", "Mohit");
 // Retrieve
 document.getElementById("result").innerHTML = localStorage.getItem("firstname");
 } else {
    document.getElementById("result").innerHTML = "Sorry, browser does not support Web torage";
 }
</script>
</body>
</html>

//localStorage.removeItem("firstname");


Reference url:http://www.w3schools.com/html/html5_webstorage.asp