用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 相关文章推荐
ASP中用Join和Array,可以加快字符连接速度的代码
Aug 22 Javascript
JavaScript函数详解
Feb 27 Javascript
JS简单实现动画弹出层效果
May 05 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
jQuery构造函数init参数分析
May 13 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
用js实现放大镜的效果的简单实例
May 23 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
快速解决处理后台返回json数据格式的问题
Aug 07 Javascript
小程序中设置缓存过期的实现方法
Jan 14 Javascript
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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
aspx中利用js实现确认删除代码
2010/07/22 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
2012/02/10 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
2017/01/13 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
vue操作动画的记录animate.css实例代码
2019/04/26 Javascript
Python查询IP地址归属完整代码
2017/06/21 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python中创建二维数组
2018/10/17 Python
利用Python将文本中的中英文分离方法
2018/10/31 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python命令行参数用法实例分析
2019/06/25 Python
Python实现序列化及csv文件读取
2020/01/19 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
商务英语广告词大全
2014/03/18 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
九九重阳节标语
2014/10/07 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2015年食堂工作总结报告
2015/04/23 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
MySQL之DML语言
2021/04/05 MySQL
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
使用scrapy实现增量式爬取方式
2022/06/21 Python