将表单数据保存到本地存储，提供未定义的

Question

我在wordpress中有一个表单，用户可以在其中输入数据。我想通过使用本地存储来保存这些数据。但当我去一个页面时，表格没有显示，我回去了，我得到“未定义”。

我的代码只有在下一页显示表单时才有效。 示例：如果我填写首页表格并转到第3页，如果没有表格，然后返回首页，表格将填入“未定义”。

$(document).ready(function() {
        $(window).unload(saveSettings);
        loadSettings();
});
        // This will store and autofill the fields value on next page
        function loadSettings() {
            $('#searchbox1').val(localStorage.searchbox1);
            $('#first').val(localStorage.first);
            $('#first2').html(localStorage.first2);
            $('#second').val(localStorage.second);
            $('#second2').html(localStorage.second2);
            $('#third').val(localStorage.third);
            $('#third2').html(localStorage.third2);
        }

        function saveSettings() {
            localStorage.searchbox1 = $('#searchbox1').val();
            localStorage.first = $('#first').val();
            localStorage.first2 = $('#first2').html();
            localStorage.second = $('#second').val();
            localStorage.second2 = $('#second2').html();
            localStorage.third = $('#third').val();
            localStorage.third2 = $('#third2').html();
        }

我的html表单

<form id="myForm" >

<input type="text" id="searchbox1" placeholder="Example: 22x32x7" value="" name="searchbox1" id="s" />
<input type="submit" id="searchsubmit" value="" />
<div class="form-3input-boxes-wraper col-sm-5">
  <div class="form-3input-boxes">

    <label for="insideDiameter">insideDiameter mm</label>
    <input type="text" value="" id="first" name="first" />
    <input type="hidden" value="" name="x" />

    <label for="outsideDiameter">outsideDiameter mm</label>
    <input type="text" value="" id="second" name="second" />
    <input type="hidden" value="" name="x" />

    <label for="width">width</label>
    <input type="text" value="" id="third" name="s" />
  </div>    
    <span id="first2"></span>
    <span id="second2"></span>
    <span id="third2"></span>
    </div>

提前致谢！