用angular实时获取本地localStorage数据,实现一个模拟后台数据登入的效果
研究了一上午，终于做出了，实时获取本地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数据,实现一个模拟后台数据登入的效果的更多相关文章
- 超简单本地mock假数据测试，模拟后台数据返回必杀技
温馨提示:急性子可以直接拉到最后观看方法步骤. 什么是mock? mock就是在开发过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试开发的方法. 使用mock有什么好处? ...
- iBase4j前端01_bootstrap-suggest json-server模拟后台数据、bootstrap-suggest环境搭建、开启bootstrap-suggest的post和put请求
1 准备 1.1 模拟的json数据 { "info": [ { "message": "信息", "value": [ ...
- express+mockjs实现模拟后台数据发送
前言: 大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据. 模拟数据方法 1.通过 ...
- sql的存储过程实例--动态根据表数据复制一个表的数据到另一个表
动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track ...
- vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
- mock数据（模拟后台数据）
mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...
- windows 无法启动 SQL Server (MSSQLSERVER) 服务（位于本地计算机上）。错误 1069由于登入失败而无法启动 。
windows 无法启动 SQL Server (MSSQLSERVER) 服务(位于本地计算机上).错误 1069由于登入失败而无法启动. 今天登录测试服务器突然出现无法登录的情况,经排查发现,SQ ...
- vue模拟后台数据，请求本地数据的配置（旧版本dev-server.js，新版本webpack.dev.conf.js）
最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...
- Vue学习之Vue模拟后台数据
前后端项目的开发,需要前端和后端同时进行开发,有时后端开发人员还未完成API接口可以提供给前端调用,因此就需要模拟前端请求后端接口,后端返回数据.一般开发中都是返回json数据格式来完成前后端的交互. ...
随机推荐
- cdoj 1256 昊昊爱运动 预处理/前缀和
昊昊爱运动 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1256 Descr ...
- Lambda表达式实现有限状态机
实现状态机有多种模式,其中最灵活而强大的方式是通过迁移表来实现,该方式的缺点之一是需要编写大量小块代码去支持迁移表.而在C#3.0中,可以以一种非常优雅的方式实现. 除了有限状态机外,还有有限自动机, ...
- Android 滑动效果基础篇（四）—— Gallery + GridView
Android系统自带一个GridView和Gallery两个控件,GridView网格显示,Gallery单个浏览,两者结合起来可以真正实现Gallery浏览图片效果. 本示例通过GridView和 ...
- 免费的天气预报API--谷歌，雅虎，中央气象台
Google Weather API 仅仅支持美国地区使用邮政编码进行查询,比如: http://www.google.com/ig/api?hl=zh-cn&weather=94043 ...
- Ejection chain 与交错路
相关文献: Rego, C. (1998). "A Subpath Ejection Method for the Vehicle Routing Problem." Manage ...
- 《Maven_孔浩》Maven依赖
项目目录结构如下: pom.xml src main\java\zttc\itat\maven\ch02 target pom.xml文件说明 groupId:项目id(如:zt ...
- 【双十一到了，准备买书了么？】推荐几本c/c++入手的书籍
<C和指针>c语言的经典之作,全书共18章,覆盖了数据.语句.操作符和表达式.指针.函数.数组.字符串.结构和联合等几乎所有重要的C编程话题.而且每章后面都有基础回顾已经较多例程,很适合入 ...
- memcached linux / win32 1.4.13
memcached-win32-1.4.13 点击下载 http://pan.baidu.com/s/1kTMABaf memcached -d install (安装为windows service ...
- 代理和 block 传值的使用
// // ZYViewController.h // BlockTest // // Created by yejiong on 14/11/2. // Copyright © 2014年 zzz. ...
- android-partition分析
转载请注明来源:cuixiaolei的技术博客 这里讲下android的分区.具体的使用在另一片文章中介绍,这里只是把它拿出来介绍. android的存储分为两种 一种叫做RAM,如emmc标准的dd ...