• 用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>
    密&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>

  • 相关阅读:
    添雨跟打器各字体显示效果(巳已己、单字前五百、词组标记线)-by老随风
    添雨跟打器保存文章进度功能-by老随风
    指爱打字群添雨跟打器使用教程(指爱群新手教程)-by指爱群友
    小鹤双拼飞扬版码长控制个人经验-by老随风
    小鹤双拼飞扬版编码清除功能-by老随风
    小鹤双拼学习指引-by小鹤双拼作者-散步的鹤
    小鹤双拼提速方法个人经验-by老随风
    打字提速练习方法-by小鹤双拼QQ群友-微笑的军师
    新手如何快速上手双拼,提高打字速度-by小鹤双拼输入法QQ群友-弧
    小鹤双拼飞扬版反查编码功能解释-by老随风
  • 原文地址:https://www.cnblogs.com/Sphiazcs/p/6045150.html
Copyright © 2020-2023  润新知