研究了一上午，终于做出了，实时获取本地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>
密&nbsp;&nbsp;码：<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数据,实现一个模拟后台数据登入的效果的更多相关文章

  1. 超简单本地mock假数据测试，模拟后台数据返回必杀技

    温馨提示:急性子可以直接拉到最后观看方法步骤. 什么是mock? mock就是在开发过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试开发的方法. 使用mock有什么好处? ...

  2. iBase4j前端01_bootstrap-suggest json-server模拟后台数据、bootstrap-suggest环境搭建、开启bootstrap-suggest的post和put请求

    1 准备 1.1 模拟的json数据 { "info": [ { "message": "信息", "value": [ ...

  3. express+mockjs实现模拟后台数据发送

    前言: 大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据. 模拟数据方法 1.通过 ...

  4. sql的存储过程实例--动态根据表数据复制一个表的数据到另一个表

    动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track ...

  5. vue-cli模拟后台数据交互

    作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...

  6. mock数据（模拟后台数据）

    mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...

  7. windows 无法启动 SQL Server (MSSQLSERVER) 服务（位于本地计算机上）。错误 1069由于登入失败而无法启动 。

    windows 无法启动 SQL Server (MSSQLSERVER) 服务(位于本地计算机上).错误 1069由于登入失败而无法启动. 今天登录测试服务器突然出现无法登录的情况,经排查发现,SQ ...

  8. vue模拟后台数据，请求本地数据的配置（旧版本dev-server.js，新版本webpack.dev.conf.js）

    最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpa ...

  9. Vue学习之Vue模拟后台数据

    前后端项目的开发,需要前端和后端同时进行开发,有时后端开发人员还未完成API接口可以提供给前端调用,因此就需要模拟前端请求后端接口,后端返回数据.一般开发中都是返回json数据格式来完成前后端的交互. ...

随机推荐

  1. 关于Vim的问题s

    2013-11-23 17:29:45 1.关于.swp文件 swap对于保护非正常退出是有好处的,但从最开始使用vim就发现的一个问题十分恼火!非正常退出再进入后选择了恢复R,然后编辑正常保存正常退 ...

  2. 关于Python中的self

    虽然我现在写过一些Python代码,但实际上几乎还没用过Class,而且一直觉得一个很别扭的事情是,Class中的函数都要写个参数self,虽然实例化调用的时候不需要. 当然,一开始就知道Python ...

  3. 也谈读书和书籍选择问题(C#)

    前言 读到一篇.net程序员应该看什么书?深有感触.以前曾经用C#也开发过几年的东西.在那里对相关语言和开发都有了一定的了解.这里,结合自己当初的一些体会和见识把一些比较好的书籍也和大家分享一下.这一 ...

  4. MRuby 编译笔记

    专注于嵌入式脚本的MRuby在Windows下的编译笔记: 环境: OS: Windows 8.1, 使用 VS Express 2013 for Desktop. 材料: MRuby : 下载源码就 ...

  5. Android 4.1源码编译找不到资源文件解决办法

    我们在Android framework中修改资源文件时,在Android 4.0之前,都是直接在sourcecode/frameworks/base/core/res/res下面添加对应的资源文件, ...

  6. 把json格式对象转成可提交字符串格式,会过滤掉函数 {a: {b: 3}, b: [1], c: "d"} -> a.b=3&b[0]=1&c=d

    var json = { name: "任务名称" , scoreRule: "", score: "", // 如果规则表达式不为空,则默 ...

  7. Jetty学习（一）

           最近做一个项目,需要动态添加与移除servlet容器的http端口,并且启动都是嵌入式的.因此,果断选择了Jetty.        在模块化方面,Jetty是做的相当给力的一个容器,对 ...

  8. Mac OS X操作系统常见快捷键集锦

    Mac OS X操作系统常见快捷键集锦 启动时的快捷键 启动时按住 X 键 : 强制从 Mac OS X 启动(适用于那些在同一宗卷上安装了 Mac OS X 和 Mac OS 9 双系统的 Mac ...

  9. C++ _access和_waccess的使用方法

      C++ _access和_waccess的使用方法 概述 头文件:<io.h> 判断文件的访问权限 原型 int _access( const char *path,   int mo ...

  10. DataBase 之 常用操作

    (1) try catch 配合 Transactions 使用 --打开try catch功能 set xact_abort on begin try begin tran ) commit tra ...