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

时间：2021-05-18

研究了一上午，终于做出了，实时获取本地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>密&nbsp;&nbsp;码：<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数据,实现一个模拟后台数据登入的效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章