//简易操作，只能当前页面储存一个username和password.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>document</title>
<style>
#check{
position:absolute;
top:120px;
left:0px;
}
</style>
</head>
<body>
<img src="cat/1.jpg" width="" id="img1">
//此处正常情况需要display：none。但是为了让大家看清楚 我没做处理。
<input onchange="show(this)" type="file" id="check"><br><br>
<br><br>
用户名：<input type="text" id="name">
<br><br>
密码： <input type="text" id="pass">
<br><br>
<input type="button" value="登录" id="log">
<input type="button" value="注册" id="add">
</body>
<script>
var oImg=document.getElementById('img1');
var read=new FileReader();
var reg=/^data:image/;
function show(a){
var oFile=a.files[];
read.onload=function(){
if(reg.test(this.result)){
oImg.src=this.result;
}else{
alert('您输入的图片格式有误');
return false;
}
}
read.readAsDataURL(oFile);
}
var oLog=document.getElementById('log');
var oAdd=document.getElementById('add');
var oName=document.getElementById('name');
var oPass=document.getElementById('pass');
oName.value=localStorage.userName;
oPass.value=localStorage.passWord;
oAdd.onclick=function(){
var userName=oName.value;
var passWord=oPass.value;
var arr=[];
function findArr(){
for(var userName in localStorage){
arr.push(localStorage[userName]);
}
return arr;
}
var d=findArr();
if(userName==d[]){
alert('账户已注册');
return false;
}else{
localStorage.userName=userName;
localStorage.passWord=passWord;
alert('注成功册');
}
};
oLog.onclick=function(){
var userName=oName.value;
var passWord=oPass.value;
var arr=[];
function findArr(){
for(var userName in localStorage){
arr.push(localStorage[userName]);
}
return arr;
}
var d=findArr();
if(userName==d[]&&passWord==d[]){
alert('登录成功');
//fn&&fn();
}else if(userName==d[]&&passWord!=d[]){
alert('密码错误');
}else if(userName!=d[]){
alert('用户不存在');
}
};
</script>
</html>
原生js+本地储存登录注册的相关教程结束。
