Angular Session存儲不起作用
[英]Angular Session storage doesn't work
問題描述
我創建一個登錄頁面，當一個人通過身份驗證后，該頁面會創建一個令牌並將此令牌保存在會話存儲中（請參閱此處的會話存儲變量： http : //imgur.com/a/koxaE ），但是如果我更改頁，會話存儲為空（請在此處查看： http : //imgur.com/a/RBFlx ）我希望使用會話存儲將此令牌傳遞到第二頁，但我不知道為什么這不起作用。 這是我的login.html（有會話的html）：
<!DOCTYPE html> <!-- saved from url=(0066)https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/signin/ --> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="images/puzzle.png" /> <title>Login</title> <link href="./styles/bootstrap.min.css" rel="stylesheet"> <link href="./styles/signin.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body ng-app="StaffManagement" ng-controller="LoginController" ng-fa> <div class="container"> <form class="form-signin" role="form" ng-controller="LoginController" ng-submit="submitCredentials()" novalidate> <h2 class="form-signin-heading">Hai bisogno di autenticarti</h2> <input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="email" ng-model="staffLoginForm.email"> <input type="password" class="form-control" placeholder="Password" required="" id="password" ng-model="staffLoginForm.pass"> <label class="checkbox"> <input type="checkbox" value="remember-me"> Ricordami </label> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> <script src="scripts/angular.js"></script> <script type="application/javascript"></script> <script src="scripts/login-controller.js"></script> <script src="scripts/rest-services.js"></script> </body></html>
這是login-controller.js（在其中創建會話）：
var app = angular.module("StaffManagement", []); app.controller("LoginController", function($scope, $http, restService) { $scope.stafflogins = []; $scope.staffLoginForm = { email: "", pass: "" }; $scope.tokenStaffForm = { idtokenstaff: -1, tokenstaff: "" }; $scope.staffForm = { idstaff : -1, staffType: { idstaffType: -1, type: "" }, name: "", surname: "", birthDate: "", phone: "", gender: true, working: true, staffLogin: { idstaffLogin: -1, email: "", pass: "" } }; $scope.submitCredentials= function() { restService.login($scope.staffLoginForm, _logsuccess, _logerror); } function _logsuccess(response) { console.log("Loggato correttamente"); console.log(response.status); var CurrentToken = response.data; } function _logerror(response) { console.log("Login fallito"); console.log(response.status); } console.log(sessionStorage.getItem.toString); });
這是第二頁（edit_employee.html）：
<!DOCTYPE html> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="shortcut icon" href="images/puzzle.png" /> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" /> <link rel="stylesheet" href="styles/angular-bootstrap-datepicker.css" /> <link rel="stylesheet" href="styles/mainBoot.css"> <link rel="stylesheet" href="styles/scrollbar.css"> <link rel="stylesheet" href="styles/noscroll_numberfield.css"> <title>Pannello dipendenti</title> <link href="./styles/bootstrap.min.css" rel="stylesheet"> <link href="./styles/dashboard.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <style id="holderjs-style" type="text/css"></style></head> <body ng-app="StaffManagement" ng-controller="StaffController" background="images/sfondoblu3.png"> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand">FDDispenser</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Pannello Dipendenti</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Settings</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Profile</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Help</a></li> </ul> <form class="navbar-form navbar-right"> <input type="text" class="form-control" placeholder="Search..."> </form> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li class="active"><a href="edit_employee.html">Aggiungi/Modifica Dipendente</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Reports</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Analytics</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/#">Export</a></li> </ul> <ul class="nav nav-sidebar"> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Nav item</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Nav item again</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">One more nav</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Another nav item</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">More navigation</a></li> </ul> <ul class="nav nav-sidebar"> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Nav item again</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">One more nav</a></li> <li><a href="https://hackerstribe.com/guide/IT-bootstrap-3.1.1/examples/dashboard/">Another nav item</a></li> </ul> </div> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <h1 style="color:#4e67c3;" class="page-header">Aggiungi/Modifica dipendenti</h1> <form ng-submit="submitStaff()"> <table> <tr> <th colspan="4" class="th2">Aggiungi/Modifica dipendente</th> </tr> <tr> <td>Nome</td> <td><input type="text" ng-model="staffForm.name" pattern="[a-zA-Z\\s]+" ng-pattern-restrict/></td> <td>Cognome</td> <td><input type="text" ng-model="staffForm.surname" pattern="[a-zA-Z'\\s]+" ng-pattern-restrict/></td> </tr> <tr> <td>Data di Nascita</td> <td> <input id="datepicker" type="text" data-ng-datepicker data-ng-options="datepickerOptions" ng-model="staffForm.birthDate"></td> <td>Telefono</td> <td><input type="number" ng-model="staffForm.phone"/></td> </tr> <tr> <td>Sesso</td> <td><select ng-model="staffForm.gender" ng-options="opt.type as opt.name for opt in selectg" ></td> <td>Email</td> <td><input type="text" ng-model="staffForm.staffLogin.email" /></td> </tr> <tr> <td colspan="4" ><input style="width:200px" onmouseover="this.className='button2'" onmouseout="this.className='blue-button'" type="submit" value="Invia" class="blue-button" /></td> </tr> </table> </form> <h2 class="sub-header" style="color:#4e67c3;">Dipendenti</h2> <div class="table-responsive"> <form ng-submit="submitStaff()"> <table id="thetable" class="scrollable"> <tbody> <tr> <th class="th2">Nome</th> <th class="th2">Cognome</th> <th class="th2">Data di Nascita</th> <th class="th2">Telefono</th> <th class="th2">Sesso</th> <th class="th2">StaffId</th> <th class="th2">Email</th> <th class="th2">Azioni</th> </tr> <tr ng-repeat="staff in staffs"> <td> {{ staff.name }}</td> <td> {{ staff.surname }}</td> <td> {{ staff.birthDate }}</td> <td> {{ staff.phone }}</td> <td> <div ng-switch on="staff.gender"> <span ng-switch-when="true">Uomo</span> <span ng-switch-when="false">Donna</span> </div> </td> <td> {{ staff.idstaff }}</td> <td> {{ staff.staffLogin.email }}</td> <td> <a onmouseover="this.className='button2'" onmouseout="this.className='blue-button'" ng-click="editStaff(staff)" class="blue-button">Edit</a><a onmouseover="this.className='button2'" onmouseout="this.className='red-button'" ng-click="deleteStaff(staff)" class="red-button">Delete</a> </td> </tr> </tbody> </table> <div id="snackbar">Success</div> <div id="snackbar_nofield">Inserisci tutti i campi</div> <div id="snackbar_invalid">Hai inserito dati non validi</div> </form> </div> </div> </div> </div> <script src="./scripts/bootstrap.min.js.download"></script> <script src="./scripts/docs.min.js.download"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> <script src="scripts/deployeePanel.js"></script> <script src="scripts/rest-services.js"></script> <script src="scripts/jquery.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script src="scripts/angular.js"></script> <script src="scripts/angular-bootstrap-datepicker.js" charset="utf-8"></script> <script type="application/javascript"></script> </body></html>
這是與第二頁相關聯的js，名為deployeePanel.js：
.module("StaffManagement", ['ng-bootstrap-datepicker']); app.controller("StaffController", function($scope, $filter, $http, restService) { $scope.staffs = []; $scope.staffLast = []; $scope.staffForm = { idstaff : -1, staffType: { idstaffType: 2, type: "Dipendente" }, name: "", surname: "", birthDate: "", phone: "", gender: true, working: true, staffLogin: { idstaffLogin: -1, email: "", // pass: "", } }; $scope.staffLoginForm = { idstaffLogin: -1, email: "", }; $scope.selectg = [ {name:'uomo', type: true}, {name:'donna', type: false} ]; $scope.dateold = { getdateold: "" }; $scope.datepickerOptions = { format: 'yyyy/mm/dd', language: 'it', startDate: "01/01/1900", endDate: new Date(), autoclose: true, weekStart: 1 }; $scope.wks = {number: 1, name: 'testing'}; console.log($scope.staffForm.gender); _refreshStaffData(); $scope.submitStaff = function() { console.log($scope.staffForm); if($scope.staffForm.name == "" || $scope.staffForm.surname == "" || $scope.staffForm.staffLogin.email == "" || $scope.staffForm.birthDate == "" || $scope.staffForm.phone == "" || $scope.staffForm.gender == null || $scope.staffForm.idstaff == null) _showSBNoField(); else if(!_emailCheck($scope.staffForm.staffLogin.email)) _showSBInvalid(); else{ if ($scope.staffForm.idstaff == -1) { console.log("StaffLogin"); console.log($scope.staffForm.staffLogin); console.log($scope.staffForm); $scope.staffForm.birthDate = $filter('date')(new Date($scope.staffForm.birthDate), "yyyy-MM-dd"); console.log( $scope.staffForm.birthDate); restService.insertstaff($scope.staffForm, _giveLast, _error); } else { $scope.staffForm.birthDate = $filter('date')(new Date($scope.staffForm.birthDate), "yyyy-MM-dd"); console.log( $scope.staffForm.birthDate); restService.updatestaff($scope.staffForm, _giveLast, _error); } console.log("HTTP: "); console.log($http); console.log($scope.staffForm.gender); console.log($scope.staffForm.idstaff); } }; $scope.deleteStaff = function(staff) { $scope.staffForm.name = staff.name; $scope.staffForm.idstaff = staff.idstaff; $scope.staffForm.surname = staff.surname; $scope.staffForm.birthDate = staff.birthDate; $scope.staffForm.phone = staff.phone; $scope.selectg.type = staff.gender; $scope.staffForm.staffLogin.email = staff.staffLogin.email; $scope.staffForm.staffLogin.staff = ""; $scope.staffForm.working = false; console.log(staff.staffLogin.email); $http({ method : 'PUT', url : 'http://localhost:8080/FoodDrinkDispener/rest/staff', data : angular.toJson($scope.staffForm), headers : { 'Content-Type' : 'application/json' } }).then( _success, _error ); } $scope.editStaff = function(staff) { $scope.staffForm.name = staff.name; $scope.staffForm.idstaff = staff.idstaff; $scope.staffForm.surname = staff.surname; (staff.birthDate, "mm/dd/yyyy"); $scope.staffForm.birthDate = staff.birthDate; console.log($scope.staffForm.birthDate); (staff.birthDate, "yyyy-MM-dd"); $scope.staffForm.phone = parseInt(staff.phone, 10); $scope.staffForm.gender = staff.gender; $scope.selectg.type = staff.gender; $scope.staffForm.staffLogin.email = staff.staffLogin.email; $scope.staffForm.staffLogin.staff = ""; console.log(staff.staffLogin.email); }; function _refreshStaffData() { var Headers = { strngot: currentToken } restService.allstaffworking(_getstaff); function _getstaff(response){ $scope.staffs = response.data; } function _success(response) { console.log("successo"); _refreshStaffData(); _clearFormData(); _showSB(); console.log("cleared"); } function _error(response) { } function _clearFormData() { $scope.staffForm.idstaff = -1; $scope.staffForm.name = ""; $scope.staffForm.surname = ""; $scope.staffForm.birthDate = ""; $scope.staffForm.phone = ""; $scope.staffForm.gender = true; $scope.staffForm.staffLogin.idstaffLogin = -1; $scope.staffForm.staffLogin.email = ""; $scope.staffForm.staffType.idstaffType=2; $scope.staffForm.working= true; }; function _giveLast(){ restService.laststaff(_postStaffLogin); } function _postStaffLogin(response){ $scope.staffLast = response.data; $scope.staffLoginForm.idstaffLogin = $scope.staffLast.idstaff; $scope.staffLoginForm.email = $scope.staffForm.staffLogin.email; $http({ method : 'POST', url : 'http://localhost:8080/FoodDrinkDispener/rest/stafflogin', data : angular.toJson($scope.staffLoginForm), headers : { 'Content-Type' : 'application/json' } }).then( _success, _error); //se errore allora DELETE staff, altrimenti sta stessa stafflogin } function _putStaffLogin(){ $scope.staffLoginForm.idstaffLogin = $scope.staffForm.idstaff; $scope.staffLoginForm.email = $scope.staffForm.staffLogin.email; $http({ method : 'PUT', url : 'http://localhost:8080/FoodDrinkDispener/rest/stafflogin', data : angular.toJson($scope.staffLoginForm), headers : { 'Content-Type' : 'application/json' } }).then( _success, _error ); } function _showSB() { var x = document.getElementById("snackbar") x.className = "show"; setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); } function _showSBNoField() { var x = document.getElementById("snackbar_nofield") x.className = "show"; setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); } function _showSBInvalid() { var x = document.getElementById("snackbar_invalid") x.className = "show"; setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000); } function _isDate(value) { return toString.call(value) === '[object Date]'; } function _emailCheck(emailStr) { var emailPat = /^(.+)@(.+)$/; var specialChars = "\\\\(\\\\)<>@,;:\\\\\\\\\\\\\\"\\\\.\\\\[\\\\]"; var validChars = "[^\\\\s" + specialChars + "]"; var quotedUser = "(\\"[^\\"]*\\")"; var ipDomainPat = /^\\[(\\d{1,3})\\.(\\d{1,3})\\.(\\d{1,3})\\.(\\d{1,3})\\]$/; var atom = validChars + "+"; var word = "(" + atom + "|" + quotedUser + ")"; var userPat = new RegExp("^" + word + "(\\\\." + word + ")*$"); var domainPat = new RegExp("^" + atom + "(\\\\." + atom + ")*$"); var matchArray = emailStr.match(emailPat); if (matchArray == null) { alert("L'email sembra essere sbagliata: (controlla @ e .)"); return false; } var user = matchArray[1]; var domain = matchArray[2]; if (user.match(userPat) == null) { alert("La parte dell'email prima di '@' non sembra essere valida!"); return false; } var IPArray = domain.match(ipDomainPat); if (IPArray != null) { for (var i = 1; i <= 4; i++) { if (IPArray[i] > 255) { alert("L'IP di destinazione non è valido!"); return false; } } return true; } var domainArray = domain.match(domainPat); if (domainArray == null) { alert("La parte dell'email dopo '@' non sembra essere valida!"); return false; } var atomPat = new RegExp(atom, "g"); var domArr = domain.match(atomPat); var len = domArr.length; if (domArr[domArr.length - 1].length < 2 || domArr[domArr.length - 1].length > 6) { alert("Il dominio di primo livello (es: .com e .it) non sembra essere valido!"); return false; } if (len < 2) { var errStr = "L'indirizzo manca del dominio!"; alert(errStr); return false; } return true; } });
我希望有人可以幫助我
1 個解決方案
解決方案1
2 已采納 2016-12-15 02:15:08
使用sessionStorage ，僅對每個窗口（或Chrome和Firefox等瀏覽器中的選項卡）可用更改。 所做的更改將被保存，並且可用於當前頁面，以及以后在同一窗口上對該站點的訪問。 關閉窗口后，將刪除存儲。
由於您沒有使用Web服務器進行瀏覽，因此即使重定向也將被視為新會話（ file:\\\\path而不是http://localhost/path ）。
因此，可以使用localStorage或從本地Web服務器瀏覽站點。
本地存儲未定義/沒有值，但不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.