用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
研究了一上午，终于做出了，实时获取本地localStorage来模拟注册登入~~~
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>我们虽然很穷，但是我们有梦想</title>
<scriptsrc="angular.js"></script>
</head>
<bodyng-app="zcsApp"ng-controller="zcsControl">
用户名：<inputtype="text"ng-model="name"/><br>
密 码：<inputtype="text"ng-model="pwd"/><br>
确认密码：<inputtype="text"ng-model="pwd2"/><br>
<inputtype="button"value="注册"ng-click="ZhuCe()"/>
<inputtype="button"value="登入"ng-click="Enter()"/>
<spanstyle="color:red">{{message}}</span>
</body>
<script>
//vardata={"name":"admin","pwd":"12"};
functionPersonalInfo(name,pwd){
this.name=name;
this.pwd=pwd;
}
PersonalInfo.prototype.savaLocalStorage=function(){
varstorage=window.localStorage.getItem("PersonalInfo");//得到的数据是字符串
storage=JSON.parse(storage)||[];//字符串转换成对象
storage.push(this);
window.localStorage.setItem("PersonalInfo",JSON.stringify(storage));
};
PersonalInfo.selectByName=function(name,pwd){
varstorage=window.localStorage.getItem("PersonalInfo");
storage=storage?JSON.parse(storage):[];
returnstorage.some(function(v){//返回一个布尔值
returnv.name===name&&v.pwd;
})
};
PersonalInfo.prototype.hasName=function(name,pwd,fn,fn2){
varstorage=window.localStorage.getItem("PersonalInfo");//得到的数据是字符串
storage=storage?JSON.parse(storage):[];
vardata=storage;
for(vari=0;i<data.length;i++){
varv=data[i];
if(name!==v.name&&pwd!==v.pwd){
fn();
return;
}
};
};
angular.module("zcsApp",[])
.controller("zcsControl",["$scope",function($scope){
$scope.ZhuCe=function(){
$scope.message="";
varname=$scope.name;
varpwd=$scope.pwd;
varpwd2=$scope.pwd2;
//若是输入为空或者undefined时
if(name===undefined||name.trim().length===0||pwd===undefined||pwd.trim().length===0||pwd2===undefined||pwd2.trim().length===0){
$scope.message="请输入完整信息";
return;
}
//若输入的密码和确认密码不一致时
if(pwd!==pwd2){
$scope.message="俩次输入的密码不一致";
return;
}
//判断本地是不是已经有这个名字
if(PersonalInfo.selectByName(name,pwd)){
$scope.message="此账号已注册";
return;
}
//存储信息
vardata=newPersonalInfo(name,pwd);
data.savaLocalStorage();
};
$scope.Enter=function(){
$scope.message="";
varname=$scope.name;
varpwd=$scope.pwd;
varper=newPersonalInfo(name,pwd);
if(PersonalInfo.selectByName(name)){
$scope.message="登入成功";
return;
}
per.hasName(name,pwd,function(){
$scope.message="账号错误或者密码不正确"
});//得到登入的信息
}
}])
</script>
</html>
以上所述是小编给大家介绍的用ANGULAR实时获取本地LOCALSTORAGE数据,实现一个模拟后台数据登入的效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！