使用Angular实现了一个简单的登录注册的功能........
涉及到的Angular知识点很少 主要是这个功能的实现...(*^__^*) 嘻嘻……
里面涉及到的知识点记录:
1.本地存储的操作 localStorage
获取本地存储的值 window.localStorage.getItem(key)-->value (得到的数据是字符串"[ { "name": "andim", 'pwd': '123' } ]" )
设置本地存储的值 window.localStorage.setItem(key,value)
操作:
将取出来的数据(字符串)转化为数组-->然后插入(push)新的值-->再转化为字符串-->再存到本地存储中
方法 :JSON.parse( storage )-->storage.push( this )-->JSON.stringify( storage )-->window.localStorage.setItem(...)
- JSON.parse( ) 将 json 格式的字符串, 转换成 对象
- JSON.stringifly( ) 将一个 对象 转换成一个 JSON 格式的字符串
JSON 格式已经是 网络传输中使用的核心数据格式:
1. 对象的形式: '{ "key": value, "key": value, ... }'
2. 数组形式: '[ jsonObj, jsonObj, ... ]'
2.数组中的some()方法
遍历数组,遇到符合条件的就停止遍历,有符合就返回true,反之返回flase
数组.some(function(数组v){
return 条件
})
1 storage.some(function ( v ) { 2 3 return v.name === name; 4 5 //strorage中name的值和输入的值相等,返回true 返之返回false 6 7 });
附上源代码.......
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .red { 8 color: red; 9 } 10 </style> 11 </head> 12 <body ng-app="ZhuCeApp"> 13 <!-- ZhuCeCtrl --> 14 <!-- View --> 15 <div ng-controller="ZhuCeController"> 16 用 户 名: <input type="text" ng-model="name"><br /> 17 密 码: <input type="text" ng-model="pwd"><br /> 18 确认密码: <input type="text" ng-model="pwd2"><br /> 19 <input type="button" value="注册" ng-click="ZhuCe()"> 20 <span class="red">{{message}}</span> 21 </div> 22 23 </body> 24 <script src="./angular.js"></script> 25 <script> 26 // Model 27 function PersonInfo ( name, pwd ) { 28 this.name = name; 29 this.pwd = pwd; 30 } 31 32 PersonInfo.prototype.saveToLocalStorage = function () { 33 // 将 this 写入 本地存储 34 // 先将以前的数据取出来, 然后在合并到数据中, 再写一会去 35 var storage = window.localStorage.getItem( 'PersonInfo' ); // 第一次 没有数据 undefiend 36 // 第二次 "[ { "name": "andim", 'pwd': '123' } ]" 37 38 storage = storage ? JSON.parse( storage ) : []; // 第一次 storage 是 [] 39 // 第二次 storage 是 [ { "name": "andim", 'pwd': '123' } ] 40 41 storage.push( this ); // 第一次 [ { "name": "andim", 'pwd': '123' } ] 42 // 第二次 [ { "name": "andim", 'pwd': '123' }, { "name": "zhangsan", "pwd": "123456" } ] 43 44 window.localStorage.setItem( 'PersonInfo', JSON.stringify( storage ) ); 45 } 46 47 //检测是否有重名 48 PersonInfo.selectByName = function ( name ) { 49 var storage = window.localStorage.getItem( 'PersonInfo' ); 50 storage = storage ? JSON.parse( storage ) : []; 51 52 return storage.some(function ( v ) { 53 return v.name === name; 54 }); 55 } 56 57 // Controller 58 angular.module( 'ZhuCeApp', [] ) 59 .controller( 'ZhuCeController', function ( $scope ) { 60 61 // 处理逻辑 62 $scope.ZhuCe = function () { 63 $scope.message = ''; 64 65 // 1 需要验证用户的输入 66 var name = $scope.name, 67 pwd = $scope.pwd, 68 pwd2 = $scope.pwd2; 69 70 if ( name === undefined || name.trim().length === 0 || 71 pwd === undefined || pwd.trim().length === 0 || 72 pwd2 === undefined || pwd2.trim().length === 0 ) { 73 $scope.message = '请输入完整信息'; 74 return; 75 } 76 77 78 // 2 如果输入了内容验证密码输入是否一致 79 if ( pwd !== pwd2 ) { 80 $scope.message = '两次密码输入不一致'; 81 return; 82 } 83 84 // 判断 名字是否已被使用 85 if ( PersonInfo.selectByName( name ) ) { 86 $scope.message = '该用户已存在....'; 87 return; 88 } 89 90 91 // 3 写入数据库( localStorage ) 92 var data = new PersonInfo( name, pwd ); 93 94 // 写到 本地存储中 95 data.saveToLocalStorage(); 96 $scope.name = $scope.pwd = $scope.pwd2 = ''; 97 } 98 }); 99 </script> 100 </html>
很简陋的方法...勿见笑>>>>