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

 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>

 

posted @ 2016-01-18 16:24  挥刀  阅读(703)  评论(0)  编辑  收藏  举报