如何在页面加载时保持界面视图?

Question

在我设置的提交事件中，从接收到的数据中做一些事情，我想在刷新页面时保留这些事情，即使我做我做的事情(使用 if sessionStorage.token(，它不起作用。我之前用Javascript做过完全相同的场景，我发誓它有效。

如何解决这个问题？ 请帮助我。

// Initialize variables
var $jUser = {};
var $ajUsers = [];
// Login POST 
$('#frm-login').submit(function (e) {
event.preventDefault()
$loginButton.text('Please wait ...').prop('disabled')
$.ajax({
url: "/login-user",
type: "POST",
data: $('#frm-login').serialize(),
dataType: "json"
}).always(function (response) {
$loginButton.text('Logging in').prop('disabled')
console.log("Login", response)
if (response.status == "error") {
$loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
return
}
sessionStorage.setItem('token', response.token)
if (sessionStorage.token) {
$.ajax({
type: "GET",
url: "/verify-user",
headers: {
'Authorization': 'Bearer ' + sessionStorage.token
},
dataType: "json"
}).always(function (response) {
console.log("Auth", response)
if (response.status == "error") {
$loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
return
}
$('#index-page').css('display', 'none')
$('#main-page').css('display', 'block')
$.getScript('/js/socket.js', function () {
console.log('script loaded');
});
$jUser = response.authData.user
$userAvatar.attr('src', $jUser.avatar)
$userFullname.text($jUser.first_name + ' ' + $jUser.last_name)
console.log($jUser)
})
}
})
})
console.log($jUser)
if (sessionStorage.token) {
function userSession() {
$('#index-page').css('display', 'none')
$('#main-page').css('display', 'block')
$userAvatar.attr('src', $jUser.avatar)
$userFullname.text($jUser.first_name + ' ' + $jUser.last_name)
console.log('hello')
}
}

Answer 1

首先，您似乎没有在任何地方userSession调用该函数。您只是在最终的令牌测试中定义它。

此外，您正在$.ajax调用返回的 jqXHR 上调用always。 无论 ajax 请求是否成功，都会调用always方法，并根据请求的状态将不同的参数传递给提供的函数。 请参阅 jQuery 延迟方法文档。 我认为您想使用$.ajax参数的success属性来实现您想要的。

最后，我没有看到您在哪里设置$jUser，但您的代码似乎假设它在页面加载中持久化。 但是，每次执行javascript时(每次页面加载时(，它都会重置为空对象({}(。您可能希望序列化它并将其保存在sessionStorage对象中，以便它将持久化，然后对其进行测试并反序列化它以$jUser是否存储它。 或者，您可以使用存储的令牌(如果存在(在每次页面加载时调用verifyUser，这会效率较低，但应该可以工作。

如果无法访问服务器进行 Ajax 调用，我无法测试我对代码的更改，但无论如何我都会发布它们，您可以自己尝试。 让我知道它是否有帮助。

// Initialize variables
var $jUser = {};
var $ajUsers = [];
var jUserJSON;
function failedLogin() {
// handle failed logins
$loginButton.removeClass('lime').addClass('red').text('Log in failed. Try again.');
$loginButton.text('Login').prop('disabled', false);
}
function ajaxError(url, testStatus, errorThrown) {
console.log("The " + url + " Ajax request failed. status:" + textStatus + ', errorThrown: ' + errorThrown);
}
function updatePageWithLogin() {
$('#index-page').css('display', 'none');
$('#main-page').css('display', 'block');
$userAvatar.attr('src', $jUser.avatar);
$userFullname.text($jUser.first_name + ' ' + $jUser.last_name);
$.getScript('/js/socket.js', function () {
console.log('script loaded');
});
}
function verifyUser(token) {
$.ajax({
type: "GET",
url: "/verify-user",
headers: {
'Authorization': 'Bearer ' + token
},
dataType: "json",
success: function (response) {
console.log("Auth", response)
if (response.status == "error") {
failedLogin();
return;
}
$jUser = response.authData.user;
// persist the $jUser object
jUserJSON = JSON.stringify($jUser);
sessionStorage.setItem('juser', jUserJSON);
console.log("$jUser: " + jUserJSON);
updatePageWithLogin();
},
error: function(jqXHR, textStatus, errorThrown) {
ajaxError("/verify-user", textStatus, errorThrown);
},
complete: function() {
// This will get called whether the Ajax request succeeds or fails
}
});
}
// Login POST
$('#frm-login').submit(function (e) {
event.preventDefault();
$loginButton.text('Please wait ...').prop('disabled');
$.ajax({
url: "/login-user",
type: "POST",
data: $('#frm-login').serialize(),
dataType: "json",
success: function(response) {
$loginButton.text('Logging in').prop('disabled', true);
console.log("Login", response)
if (response.status == "error") {
failedLogin();
return;
}
sessionStorage.setItem('token', response.token); // not sure this is necessary now
if (response.token) { verifyUser(response.token) }
},
error: function(jqXHR, textStatus, errorThrown) {
ajaxError("/login-user", textStatus, errorThrown);
},
complete: function() {
// This will get called whether the Ajax request succeeds or fails
}
})
});
jUserJSON = sessionStorage.getItem("juser");
if (jUserJSON) {
// The user has already authenticated
$jUser = JSON.parse(jUserJSON);
updatePageWithLogin();
}
console.log("$jUser: " + jUserJSON);