Translate

Thursday, August 11, 2011

How to use HTML5 local store?

I have prepared a small example which show how to use HTML local storage feature. The concept is similar to cookies, but it’s designed for larger quantities of information. Cookies are limited in size, and your browser sends them back to the web server every time it requests a new page which takes extra time and precious bandwidth.

Sample:
<!DOCTYPE html>
<html>
<head>
<script>

function putInLocalStore(){
    localStorage.setItem("comments", document.getElementById("comments").value);
}

function getFromLocalStore() {
    var data = localStorage.getItem("comments");
    var comments = document.getElementById("comments");
   
    comments.value = (data != "") ? data : "";
}

function pageOnLoad(){
    getFromLocalStore();
}

</script>
</head>
    <body onLoad="pageOnLoad();">
        Enter data to put in local store: <input id="comments" type="text" >
        <input id="submit" type="button" value="Store" onclick="putInLocalStore();" />
    </body>   
</html>

Chrome browser supports most of the HTML5 features. Copy the sample and execute it on latest chrome browser.

No comments:

Post a Comment