Untitled

<!DOCTYPE HTML>
<html>
<head>
    <title>HTML5 – Web Storage - List</title>
       <script type="text/javascript">
        //add values to list
        function addToList()
        {
            var val = document.getElementById("textData").value;
            if(val.length > 0){
                localStorage.setItem("html5List" + (localStorage.length), val);
                showList();
            }
        }

        //clear the list
        function clearList()
        {
            localStorage.clear();
            showList();
        }

	  //display the list
        function showList()
        {
            if (typeof(localStorage) == 'undefined') {
                    document.write("Your Browser Does Not Support localStorage");
            }
            else{
            document.getElementById("textData").value = "";
                var listData = "<h4>";
                listData += "List has " + localStorage.length + " item(s) <br/>";
                for(var i=0; i<localStorage.length; i++){
                    var keyStr = "html5List"+i;
                    listData += "KEY: " + keyStr +
                            "  VALUE: " + localStorage.getItem(keyStr) + "<br/>" ;
                }
                listData += "</h4>";
                document.getElementById("theList").innerHTML = listData;
            }
        }
        </script>
</head>
<body onLoad="showList();">
     <form>
        Enter Value: <input type="text" id="textData"/>
        <input type="button" onClick="addToList()" value="Add To List"/>
        <input type="button" onClick="clearList()" value="Clear List"/>
    </form><br/>
    <div style="border:2px solid gray;width:500px;padding-left:10px">
        <h2 style="color:#0a6900;text-decoration:underline;"> The List </h2>
        <div id="theList"></div>
    </div>
</body>
</html>