原生js+本地储存登录注册

 1 //简易操作，只能当前页面储存一个username和password.
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <meta charset="utf-8">
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 7 <meta name="apple-mobile-web-app-capable" content="yes">
 8 <meta name="apple-mobile-web-app-status-bar-style" content="black">
 9 <title>document</title>
10 <style>
11 #check{
12     position:absolute;
13     top:120px;
14     left:0px;
15 }
16 </style>
17 </head>
18 <body>
19 <img src="cat/1.jpg" width="100" id="img1">
20 //此处正常情况需要display：none。但是为了让大家看清楚 我没做处理。
21 <input onchange="show(this)" type="file" id="check"><br><br>
22 <br><br>
23 用户名：<input type="text" id="name">
24 <br><br>
25 密码： <input type="text" id="pass">
26 <br><br>
27 <input type="button" value="登录" id="log">
28 
29 <input type="button" value="注册" id="add">
30 </body>
31 <script>
32 var oImg=document.getElementById('img1');
33 var read=new FileReader();
34 var reg=/^data:image/;
35 function show(a){
36     var oFile=a.files[0];
37     read.onload=function(){
38         if(reg.test(this.result)){
39             oImg.src=this.result;
40         }else{
41             alert('您输入的图片格式有误');
42             return false;
43         }
44     }
45     read.readAsDataURL(oFile);
46 }
47 var oLog=document.getElementById('log');
48 var oAdd=document.getElementById('add');
49 var oName=document.getElementById('name');
50 var oPass=document.getElementById('pass');
51 oName.value=localStorage.userName;
52 oPass.value=localStorage.passWord;
53 
54 oAdd.onclick=function(){
55     var userName=oName.value;
56     var passWord=oPass.value;    
57     var arr=[];
58     function findArr(){
59         for(var userName in localStorage){
60             arr.push(localStorage[userName]);    
61         }
62         return arr;
63     }
64     var d=findArr();
65     if(userName==d[1]){
66         alert('账户已注册');
67         return false;    
68     }else{
69         localStorage.userName=userName;    
70         localStorage.passWord=passWord;
71         alert('注成功册');    
72     }    
73 };
74 oLog.onclick=function(){
75     var userName=oName.value;
76     var passWord=oPass.value;        
77     var arr=[];
78     function findArr(){
79         for(var userName in localStorage){
80             arr.push(localStorage[userName]);    
81         }
82         return arr;
83     }
84     var d=findArr();
85     if(userName==d[1]&&passWord==d[0]){
86         alert('登录成功');
87         //fn&&fn();    
88     }else if(userName==d[1]&&passWord!=d[0]){
89         alert('密码错误');    
90     }else if(userName!=d[1]){
91         alert('用户不存在');        
92     }
93 };
94 </script>
95 </html>