使用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>
很簡陋的方法...勿見笑>>>>