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>