stackoom
  简体   繁体   中英

Angular Session storage doesn't work

 原文  2016-12-15 01:54:27  7   1    javascript/ angularjs/ json/ session

Question

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. This is my login.html (html where there are the session): 

 <!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): 

 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): 

 <!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: 

 .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 answers

solution1
 2 ACCPTED  2016-12-15 02:15:08

When using sessionStorage , changes are only available per window (or tab in browsers like Chrome and 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 ).

So either use localStorage or browse your site from a local web server.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question 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 doesn't work angular filter doesn't work Angular ngSubmit doesn't work Angular $watch doesn't work Angular2 doesn't work Angular 4 jquery doesn't work
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM