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


Posted in Javascript onNovember 09, 2016

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

Javascript 相关文章推荐
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
js定时器+简单的动画效果实例
Nov 10 Javascript
swiper 自动图片无限轮播实现代码
May 21 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
js中!和!!的区别与用法
May 09 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
jQuery自定义组件(导入组件)
Nov 08 #Javascript
将json转换成struts参数的方法
Nov 08 #Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 #Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 #Javascript
基于Vuejs框架实现翻页组件
Jun 29 #Javascript
vue2.0+webpack环境的构造过程
Nov 08 #Javascript
详解React-Todos入门例子
Nov 08 #Javascript
You might like
php巧获服务器端信息
2006/12/06 PHP
ecshop 批量上传(加入自定义属性)
2012/03/20 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
javascript 尚未实现错误解决办法
2008/11/27 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
高性能JavaScript模板引擎实现原理详解
2015/02/05 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
jquery实现树形菜单完整代码
2015/12/29 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
angular-cli修改端口号【angular2】
2017/04/19 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
个人素质的自我评价分享
2013/12/16 职场文书
暑期实践思想汇报
2014/01/06 职场文书
《掌声》教学反思
2014/02/23 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
遗嘱继承公证书
2014/04/09 职场文书
业务内勤岗位职责
2014/04/30 职场文书
大型活动组织方案
2014/05/10 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
国庆阅兵观后感
2015/06/15 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python