Angular Session存储不起作用
[英]Angular Session storage doesn't work
问题描述
I make a login page and when A person is authenticated, the page create a token and this token is saved in a session storage (see the session storage variable here: http://imgur.com/a/koxaE ) but if I change page, session storage is null (see it here: http://imgur.com/a/RBFlx ) I want that this token is passed to this second page, using session storage and I don't know why this doesn't works. 
我创建一个登录页面，当一个人通过身份验证后，该页面会创建一个令牌并将此令牌保存在会话存储中（请参阅此处的会话存储变量： http : //imgur.com/a/koxaE ），但是如果我更改页，会话存储为空（请在此处查看： http : //imgur.com/a/RBFlx ）我希望使用会话存储将此令牌传递到第二页，但我不知道为什么这不起作用。 This is my login.html (html where there are the session): 这是我的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>
This is login-controller.js (where create the session): 这是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); });
This is the second page (edit_employee.html): 这是第二页（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>
and this is the js associated to the second page called deployeePanel.js: 这是与第二页相关联的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; } });
I hope that somebody can help me 我希望有人可以帮助我
1 个解决方案
解决方案1
2 已采纳 2016-12-15 02:15:08
When using sessionStorage , changes are only available per window (or tab in browsers like Chrome and Firefox). 使用sessionStorage ，仅对每个窗口（或Chrome和Firefox等浏览器中的选项卡）可用更改。 Changes made are saved and available for the current page, as well as future visits to the site on the same window. 所做的更改将被保存，并且可用于当前页面，以及以后在同一窗口上对该站点的访问。 Once the window is closed, the storage is deleted. 关闭窗口后，将删除存储。
Since you are not using a web server for browsing even a redirect will be considered as a new session ( file:\\\\path rather than http://localhost/path ). 由于您没有使用Web服务器进行浏览，因此即使重定向也将被视为新会话（ file:\\\\path而不是http://localhost/path ）。
So either use localStorage or browse your site from a local web server. 因此，可以使用localStorage或从本地Web服务器浏览站点。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
本地存储未定义/没有值，但不起作用 - local storage is undefined/no value but doesn't work
为什么这个本地存储代码不起作用？ - Why doesn't this local storage code work?
角度过滤不起作用 - Angular filtering doesn't work
角度[隐藏]不起作用 - Angular [hidden] doesn't work
Angular matMenuTriggerRestoreFocus不起作用 - Angular matMenuTriggerRestoreFocus doesn't work
角度滤镜不起作用 - angular filter doesn't work
Angular ngSubmit不起作用 - Angular ngSubmit doesn't work
角度 $watch 不起作用 - Angular $watch doesn't work
Angular2不起作用 - Angular2 doesn't work
Angular 4 jQuery不起作用 - Angular 4 jquery doesn't work
相关标签