用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 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
extjs 04_grid 单击事件新发现
Nov 27 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
jQuery事件详解
Feb 23 Javascript
Vuex实现数据增加和删除功能
Nov 11 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
PHP文件上传原理简单分析
2011/05/29 PHP
解析php mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
php脚本运行时的超时机制详解
2016/02/17 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jQuery知识点整理
2015/01/30 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
vue双向绑定简要分析
2017/03/23 Javascript
详解Node 定时器
2018/02/26 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
weui中的picker使用js进行动态绑定数据问题
2019/11/06 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
分厂厂长岗位职责
2013/12/29 职场文书
集体备课反思
2014/02/12 职场文书
会走路的树教学反思
2014/02/20 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
中学生自我评价范文
2015/03/03 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS