用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果  更新时间:2016年11月09日 08:41:12   作者:Sophiazcs   这篇文章主要介绍了用ANGULAR实时获取本地LOCALSTORAGE数据,实现一个模拟后台数据登入的效果的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下 研究了一上午,终于做出了,实时获取本地localStorage来模拟注册登入~~~ 我们虽然很穷,但是我们有梦想 用 户 名: 密  码: 确认密码: {{message}} 以上所述是小编给大家介绍的用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用法详解 angular localstorage 相关文章 AngularJS中filter的使用实例详解 这篇文章主要介绍了AngularJS中filter的使用实例详解的相关资料,这里提供实例帮助大家理解掌握,希望能帮助到大家,需要的朋友可以参考下 2017-08-08 Angular2环境搭建具体操作步骤(推荐) 下面小编就为大家带来一篇Angular2环境搭建具体操作步骤(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 详解Angularjs filter过滤器 这篇文章主要介绍了angularjs filter过滤器的相关资料,需要的朋友可以参考下 2016-02-02 AngularJS教程 ng-style 指令简单示例 本文主要介绍AngularJS ng-style 指令,这里对ng-style 指令做了详细的基础资料整理,并附有代码示例,有需要的朋友可以参考下 2016-08-08 angular+ionic 的app上拉加载更新数据实现方法 这篇文章主要介绍了angular+ionic 的app上拉加载更新数据实现方法,需要的的朋友参考下 2017-01-01 angularjs封装bootstrap时间插件datetimepicker 这篇文章主要介绍了angularjs封装bootstrap时间插件datetimepicker 的相关资料,需要的朋友可以参考下 2016-06-06 AngularJS开发教程之控制器之间的通信方法分析 这篇文章主要介绍了AngularJS开发教程之控制器之间的通信方法,结合实例形式较为详细的分析了AngularJS控制器之间通信的三种常用方式及相关使用技巧,需要的朋友可以参考下 2016-12-12 Angular8路由守卫原理和使用方法 这篇文章主要给大家介绍了关于Angular8路由守卫原理和使用方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Angular8具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-08-08 解决angularJS中input标签的ng-change事件无效问题 今天小编就为大家分享一篇解决angularJS中input标签的ng-change事件无效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 Angular中使用better-scroll插件的方法 本篇文章主要介绍了Angular中使用better-scroll插件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-03-03 最新评论

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

您可能感兴趣的文章:

  • JS localStorage实现本地缓存的方法
  • 详解JavaScript中localStorage使用要点
  • 使用jquery读取html5 localstorage的值的方法
  • android webview 中localStorage无效的解决方法
  • 在localStorage中存储对象数组并读取的方法
  • cookie解决微信不能存储localStorage的问题
  • 利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
  • 移动端使用localStorage缓存Js和css文的方法(web开发)
  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失
  • 本地存储localStorage用法详解
张贴在3