用angular实时获取本地localStorage数据,实现一个模拟后台数据登入的效果

时间：2022-10-24 20:06:23

研究了一上午，终于做出了，实时获取本地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&lowbar;bootstrap-suggest json-server模拟后台数据、bootstrap-suggest环境搭建、开启bootstrap-suggest的post和put请求

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

  3. express&plus;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 &lpar;MSSQLSERVER&rpar; 服务（位于本地计算机上）。错误 1069由于登入失败而无法启动 。

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

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

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

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

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

随机推荐

  1. c&plus;&plus;虚函数调用及使用

    #include <iostream> using namespace std; class A { public: ; }; class B: public A { public: ; ...

  2. myeclipse打红叉

    因为还没有告诉myeclipse去验证它.解决方法,选中js文件,右键Myeclipse--ManaValidation--ExcludeResource--(选中全部或者那个js)--OK

  3. C&plus;&plus;Primer 第十六章

    //1.模板定义以关键字template开始,后跟一个模板参数列表,此列表不能为空.编译器用推断出的模板参数来实例化一个特定版本的函数.类型参数前必须使用class或者typename(推荐使用typ ...

  4. &lbrack;AngularJS&rsqb; Lazy Loading modules with ui-router and ocLazyLoad

    We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want ...

  5. html5时间选择器

    HTML5日期输入类型(date)   分享   分享   分享   分享   分享 在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站. 在HTML5之前 ...

  6. cocos2d-x 工程目录结构说明

    下载最新的cocos2d-x,解压完之后呈现出如下的目录结构: cocos2dx:框架核心目录,里面是存放了2dx引擎的核心代码. CocosDenshion:各个平台的音效实现. document: ...

  7. SQL Server 无法打开物理文件的 2 种解决办法

    解决方法: 方法1.无法打开可以能是没有权限.如果是这样以管理员身份运行Managerment Studio就可以了. 方法2.找到指定的数据库文件.右键属性-->安全-->勾上  ‘完全 ...

  8. JAVA &lpar;集合和数据结构&rpar;

    Collection和Collections的区别: 1.java.util.Collection 是一个集合接口.它提供了对集合对象进行基本操作的通用接口方法.Collection接口在Java 类 ...

  9. node之querystring模块

    前言 querystring 模块提供了一些实用工具,用于解析与格式化 URL 查询字符串. 一.querystring.parse() 用于将一个查询字符串解析为JS 对象. const query ...

  10. https 对 json空对象解析的影响

    2017年11月24日09:56:01 记录一个问题: PHP返回json给APP(安卓, fastjson) 其中一个值是空对象  json_encode( [ 'aaa' => new st ...

相关文章