javascript - sessionStorage 在一个字段中返回未定义，但在其他字段中有效

Question

我有这个代码:

// Run on page load
window.onload = function() {

    // If values are not blank, restore them to the fields
    var personal_number = sessionStorage.getItem('personal_number');
    if (personal_number !== undefined){
        $('#personal_number').val(personal_number);
    }

    var email = sessionStorage.getItem('email');
    if (email !== undefined){
        $('#username').val(email);
    }

    var password= sessionStorage.getItem('password');
    if (password !== undefined){
        $('#password').val(password);
    }
}

// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
    sessionStorage.setItem("personal_number", $('#personal_number').val());
    sessionStorage.setItem("email", $('#username').val());
    sessionStorage.setItem("password", $('#password').val());
}

如果我向 personal_number、email 和 password 添加值，则此“有效”，它会保存到我的 sessionStorage 中，并且当我刷新时页面，我的输入字段得到正确填充。

但是当我转到另一个页面(在同一网站内)并返回时，我在 personal_number 输入字段中输出 undefined ，并且别人的正确值(value)观。

我不明白为什么!

首先，如果该值为未定义，则不应输出任何内容，因为:if (personal_number !== undefined)。

其次，为什么只有 personal_number 不起作用，而其他两个字段都正常？

更新:

我删除了密码字段，因为缓存它是不安全的。

我也找出了导致问题的原因，但我没有解决它。

当我访问一个没有输入字段的页面并返回时，现在，我的所有字段都输出undefined。所以当我这样做时，我似乎得到了一个新的 session 。

但是为什么它仍然输出undefined？

(function ($) {
    // Run on page load
    window.onload = function() {
        var person_number = sessionStorage.getItem("person_number");
        var email = sessionStorage.getItem("email");

        if (person_number !== undefined || person_number !== null ||
            person_number != undefined || person_number != null){
            $('#person_number').val(person_number);
        }
        if (email !== undefined || email !== null || 
            email != undefined || email != null){
            $('#username').val(email);
        }
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("person_number", $('#person_number').val());
        sessionStorage.setItem("email", $('#username').val());
    }
})(jQuery);

我知道我正在测试太多，但是这不可能输出undefined!!

更新2

我还更新了它，因此如果输入为未定义/null，它不会保存输入。但它仍然不起作用..

(function ($) {
    // Run on page load
    window.onload = function() {
        var person_number = sessionStorage.getItem("person_number");
        var email = sessionStorage.getItem("email");

        if (person_number !== undefined || person_number !== null ||
            person_number != undefined || person_number != null){
            $('#person_number').val(person_number);
        }
        if (email !== undefined || email !== null ||
            email != undefined || email != null){
            $('#username').val(email);
        }
    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {

        var person_number = $('#person_number').val();
        var email = $('#username').val();

        if (person_number !== undefined || person_number !== null ||
            person_number != undefined || person_number != null){
            sessionStorage.setItem("person_number", person_number);
        }
        if (email !== undefined || email !== null ||
            email != undefined || email != null){
            sessionStorage.setItem("email", email);
        }
    }
})(jQuery);

Answer 1

您的问题已经很老了，到目前为止您可能已经有了答案，但如果没有，或者对于任何其他遇到相同问题的人来说:

我认为您的 jquery 代码会在每个页面上加载，因此，您的 onbeforeunload 语句会尝试在每个页面上存储字段的值，即使该字段不存在并且项目变得“未定义”时也是如此。

在尝试存储字段的值之前，请确保该字段确实存在，例如使用 getElementById，如下所示:

var fieldExists = document.getElementById('person_number');

if(fieldExists !== null) {
    sessionStorage.setItem('person_number', $('#person_number').val());
}

在您的加载中，您不需要测试 if (person_number !== undefined 等...仅当它为 null

if (person_number !== null) {
    $('#person_number').val(person_number);
}

希望这有帮助