HTML本地存储,localstorg的应用实例

 <!doctype html> <html> <head>     <meta charset="UTF-8">     <title>Document</title>     <style>         #btn{width:100px;height:100px;background: #00f;}         #btn2{width:100px;height:100px;background: #00f;-webkit-transition: all 1s}         #btn.action{background: #0f0;-webkit-transition: all 1s}     </style> </head> <body> <input type="text" value=""/> <input type="text" value=""/> <input type="text" value=""/> <input type="text" value=""/> <div id="btn">存储成功</div> <div id="btn2">存储成功</div> <script> //    alert(window.localStorage); document.getElementById("btn").addEventListener("webkitTransitionEnd",function(){     document.getElementById("btn").className = ""; },false); document.getElementById("btn").addEventListener("click",function(){     document.getElementById("btn").className = "action";     var a1 = document.getElementsByTagName("input")[0].value;     var a2 = document.getElementsByTagName("input")[1].value;     var a3 = document.getElementsByTagName("input")[2].value;     var a4 = document.getElementsByTagName("input")[3].value;     arr = [         a1,a2,a3,a4     ];     localStorage.setItem("a",arr); },false);     var stordata = localStorage.getItem('a'); //    alert(stordata);     var arr2 = stordata.split(",");     arr2.forEach(function(element,index){ //        alert(element); //        alert(index);         document.getElementsByTagName("input")[index].value = element;     }) document.getElementById("btn2").onclick = function() { //    localStorage.clear();     localStorage.removeItem('a'); } </script> </body> </html>