我创建了一个登录页面，当一个人通过身份验证时，该页面会创建一个 token ，并将该 token 保存在 session 存储中(请参阅此处的 session 存储变量: /image/72lwX.jpg ) 但如果我更改页面， session 存储为空(请参阅此处: /image/aDixW.jpg ) 我希望使用 session 存储将该 token 传递到第二页，但我不知道为什么这不起作用。这是我的login.html(其中有 session 的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(在其中创建 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);
});这是第二页(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>这是与名为deployeePanel.js 的第二个页面关联的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;
}
}); 希望有人能帮助我
最佳答案
当使用sessionStorage时，更改仅适用于每个窗口(或 Chrome 和 Firefox 等浏览器中的选项卡)。所做的更改将被保存并可用于当前页面以及将来在同一窗口上访问该网站。窗口关闭后，存储将被删除。
由于您没有使用网络服务器进行浏览，因此即使重定向也将被视为新 session ( file:\\path 而不是 http://localhost/path )。
因此，要么使用 localStorage，要么从本地网络服务器浏览您的网站。
关于javascript - Angular session 存储不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41155172/