研究了一上午,終于做出了,實時獲取本地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數據,實現一個模擬后臺數據登入的效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持!
新聞熱點
疑難解答