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

Question

在提交事件时，我设置了从收到的数据中做了一些事情，我想在刷新页面时保留这些内容，甚至当我做我做的事情时（如果是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。您只是在最终的令牌测试中定义它。

另外，你在always调用返回的jqXHR上调用$.ajax。无论ajax请求是否成功，都会调用always方法，并根据请求的状态将不同的参数传递给提供的函数。见jQuery deferred method documentation。我想你想使用success参数的$.ajax属性来实现你想要的。

最后，我没有看到你在哪里设置$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);