快捷導(dǎo)航

用Angular實(shí)時(shí)獲取本地Localstorage數(shù)據(jù),實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果

更新時(shí)間：2016年11月09日 08:41:12 作者：Sophiazcs

這篇文章主要介紹了用ANGULAR實(shí)時(shí)獲取本地LOCALSTORAGE數(shù)據(jù),實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

研究了一上午，終于做出了，實(shí)時(shí)獲取本地localStorage來(lái)模擬注冊(cè)登入~~~

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>我們雖然很窮，但是我們有夢(mèng)想</title>
<script src="angular.js"></script>
</head>
<body ng-app="zcsApp" ng-controller="zcsControl">
用 戶(hù) 名：<input type="text" ng-model="name" /><br>
密&nbsp;&nbsp;碼：<input type="text" ng-model="pwd" /><br>
確認(rèn)密碼：<input type="text" ng-model="pwd2" /><br>
<input type="button" value="注冊(cè)" 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");//得到的數(shù)據(jù)是字符串
storage=JSON.parse(storage) ||[];//字符串轉(zhuǎn)換成對(duì)象
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) {//返回一個(gè)布爾值
return v.name===name&& v.pwd;
})
};
PersonalInfo.prototype.hasName= function (name,pwd,fn,fn2) {
var storage=window.localStorage.getItem("PersonalInfo");//得到的數(shù)據(jù)是字符串
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時(shí)
if(name===undefined||name.trim().length===0||pwd===undefined||pwd.trim().length===0||pwd2===undefined||pwd2.trim().length===0){
$scope.message="請(qǐng)輸入完整信息";
return;
}
// 若輸入的密碼和確認(rèn)密碼不一致時(shí)
if(pwd!==pwd2){
$scope.message="倆次輸入的密碼不一致";
return;
}
// 判斷本地是不是已經(jīng)有這個(gè)名字
if(PersonalInfo.selectByName(name,pwd)){
$scope.message="此賬號(hào)已注冊(cè)";
return;
}
// 存儲(chǔ)信息
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="賬號(hào)錯(cuò)誤或者密碼不正確"
});//得到登入的信息
}
}])
</script>
</html>

以上所述是小編給大家介紹的用ANGULAR實(shí)時(shí)獲取本地LOCALSTORAGE數(shù)據(jù),實(shí)現(xiàn)一個(gè)模擬后臺(tái)數(shù)據(jù)登入的效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: