欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果

程序员文章站 2022-06-13 17:58:57
研究了一上午,终于做出了,实时获取本地localstorage来模拟注册登入~~~ &l...

研究了一上午,终于做出了,实时获取本地localstorage来模拟注册登入~~~

<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>我们虽然很穷,但是我们有梦想</title>
<script src="angular.js"></script>
</head>
<body ng-app="zcsapp" ng-controller="zcscontrol">
用 户 名:<input type="text" ng-model="name" /><br>
密  码:<input type="text" ng-model="pwd" /><br>
确认密码:<input type="text" ng-model="pwd2" /><br>
<input type="button" value="注册" ng-click=" zhuce()"/>
<input type="button" value="登入" ng-click=" enter()"/>
<span style="color: red">{{message}}</span>
</body>
<script>
// var data={"name":"admin","pwd":"12"};
function personalinfo(name,pwd){
this.name=name;
this.pwd=pwd;
}
personalinfo.prototype.savalocalstorage= function () {
var storage=window.localstorage.getitem("personalinfo");//得到的数据是字符串
storage=json.parse(storage) ||[];//字符串转换成对象
storage.push(this);
window.localstorage.setitem("personalinfo",json.stringify(storage));
};
personalinfo.selectbyname= function (name,pwd) {
var storage=window.localstorage.getitem("personalinfo");
storage= storage?json.parse(storage):[];
return storage.some(function (v) {//返回一个布尔值
return v.name===name&& v.pwd;
})
};
personalinfo.prototype.hasname= function (name,pwd,fn,fn2) {
var storage=window.localstorage.getitem("personalinfo");//得到的数据是字符串
storage= storage?json.parse(storage):[];
var data=storage;
for(var i=0;i<data.length;i++){
var v=data[i];
if(name!==v.name&& pwd!==v.pwd) {
fn();
return;
}
};
};
angular.module("zcsapp",[])
.controller("zcscontrol",["$scope", function ($scope) {
$scope.zhuce= function () {
$scope.message="";
var name=$scope.name;
var pwd=$scope.pwd;
var pwd2=$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;
}
// 存储信息
var data=new personalinfo(name,pwd);
data.savalocalstorage();
};
$scope.enter= function () {
$scope.message="";
var name=$scope.name;
var pwd=$scope.pwd;
var per=new personalinfo(name,pwd);
if(personalinfo.selectbyname(name)){
$scope.message="登入成功";
return;
}
per.hasname(name,pwd,function () {
$scope.message="账号错误或者密码不正确"
});//得到登入的信息
}
}])
</script>
</html>

以上所述是小编给大家介绍的用angular实时获取本地localstorage数据,实现一个模拟后台数据登入的效果,希望对大家有所帮助