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>