1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #btn{width:100px;height:100px;background: #00f;} 8 #btn2{width:100px;height:100px;background: #00f;-webkit-transition: all 1s} 9 #btn.action{background: #0f0;-webkit-transition: all 1s} 10 </style> 11 </head> 12 <body> 13 <input type="text" value=""/> 14 <input type="text" value=""/> 15 <input type="text" value=""/> 16 <input type="text" value=""/> 17 <div id="btn">存储成功</div> 18 <div id="btn2">存储成功</div> 19 <script> 20 // alert(window.localStorage); 21 document.getElementById("btn").addEventListener("webkitTransitionEnd",function(){ 22 document.getElementById("btn").className = ""; 23 },false); 24 document.getElementById("btn").addEventListener("click",function(){ 25 document.getElementById("btn").className = "action"; 26 var a1 = document.getElementsByTagName("input")[0].value; 27 var a2 = document.getElementsByTagName("input")[1].value; 28 var a3 = document.getElementsByTagName("input")[2].value; 29 var a4 = document.getElementsByTagName("input")[3].value; 30 arr = [ 31 a1,a2,a3,a4 32 ]; 33 localStorage.setItem("a",arr); 34 },false); 35 36 var stordata = localStorage.getItem('a'); 37 // alert(stordata); 38 var arr2 = stordata.split(","); 39 arr2.forEach(function(element,index){ 40 // alert(element); 41 // alert(index); 42 document.getElementsByTagName("input")[index].value = element; 43 }) 44 document.getElementById("btn2").onclick = function() { 45 // localStorage.clear(); 46 localStorage.removeItem('a'); 47 } 48 </script> 49 </body> 50 </html>