用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 相关文章推荐
Jquery 常用方法经典总结
Jan 28 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
Apr 30 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 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
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
一个加载js文件的小脚本
2007/06/28 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
可以浮动某个物体的jquery控件用法实例
2015/07/24 Javascript
js实现图片上传并正常显示
2015/12/19 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
BootStrap 附加导航组件
2016/07/22 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
二种python发送邮件实例讲解(python发邮件附件可以使用email模块实现)
2013/12/03 Python
Python深入学习之装饰器
2014/08/31 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
解决Python传递中文参数的问题
2015/08/04 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
学校岗位设置方案
2014/01/16 职场文书
酒店经理职责
2014/01/30 职场文书
合伙经营协议书
2014/04/18 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书