用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
更新时间:2016年11月09日 08:41:12 作者:Sophiazcs
这篇文章主要介绍了用ANGULAR实时获取本地LOCALSTORAGE数据,实现一个模拟后台数据登入的效果的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
研究了一上午,终于做出了,实时获取本地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数据,实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- JS localStorage实现本地缓存的方法
- 详解JavaScript中localStorage使用要点
- 使用jquery读取html5 localstorage的值的方法
- android webview 中localStorage无效的解决方法
- 在localStorage中存储对象数组并读取的方法
- cookie解决微信不能存储localStorage的问题
- 利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
- 移动端使用localStorage缓存Js和css文的方法(web开发)
- JS中利用localStorage防止页面动态添加数据刷新后数据丢失
- 本地存储localStorage用法详解
相关文章
AngularJS 中的Promise --- $q服务详解
这篇文章主要介绍了AngularJS 中的Promise --- $q服务详解方法的相关资料,需要的朋友可以参考下2016-09-09angularJS自定义directive之带参方法传递详解
今天小编就为大家分享一篇angularJS自定义directive之带参方法传递详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
最新评论