javascript - 使用 session 存储来保存表单中的值

Question

当前正在尝试使用以下脚本来保存我在页面刷新时包含的账单信息。希望这能清除我在将用户重定向到 Paypal 时遇到的进一步错误。

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

        // If sessionStorage is storing default values (ex. name), exit the function and do not restore data
        if (sessionStorage.getItem('billing_firstname') == "billing_firstname") {
            return;
        }

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

        var billing_state= sessionStorage.getItem('billing_state');
        if (billing_state !== null) $('#billing_state').val(billing_state);

        var billing_country= sessionStorage.getItem('billing_country');
        if (billing_country!== null) $('#billing_country').val(billing_country);


    }

    // Before refreshing the page, save the form data to sessionStorage
    window.onbeforeunload = function() {
        sessionStorage.setItem("billing_firstname", $('#billing_firstname').val());
        sessionStorage.setItem("billing_state", $('#billing_state').val());
        sessionStorage.setItem("billing_country", $('#billing_country').val());

    }
</script>

保存以下表单(尚未将所有表单标签添加到脚本中)

<div id="billing_info" class="pad10 boxShadow" style="display:block"> 
          <!--START: SAVE_ADDRESSES-->
          <div class="chkField">
            <label for="save_address">[checkout3_PreviousAddresses]</label>
            <select type="dropdown" name="save_address" onchange="javascript:filladdress_form(this,'billing','billing');check_address('billing');" tabindex="1" class="txtBoxStyle">

              [address_billing_list]

            </select>
            <div class="clear"></div>
          </div>
          <!--END: SAVE_ADDRESSES-->
          <div class="chkField">
            <label for="billing_firstname">[CustomerInfo_firstname]</label>
            <input name="billing_firstname" onchange="clearContent(this);" type="text" id="billing_firstname" value="[billing_firstname]" size="15" tabindex="2" class="txtBoxStyle" />
            <!--START: req_billing_firstname--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_firstname-->
            <div class="clear"></div>
          </div>
          <div class="chkField">
            <label for="billing_lastname">[CustomerInfo_lastname]</label>
            <input name="billing_lastname" type="text" onchange="clearContent(this);" id="billing_lastname" value="[billing_lastname]" size="15" tabindex="3" class="txtBoxStyle" />
            <!--START: req_billing_lastname--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_lastname-->
            <div class="clear"></div>
          </div>






          <div class="chkField">
            <label for="billing_company">[CustomerInfo_company]</label>
            <input name="billing_company" type="text" onchange="clearContent(this);" id="billing_company" value="[billing_company]" size="25" tabindex="4" class="txtBoxStyle" />
            <div class="clear"></div>
          </div>

<div class="chkField">
            <label for="billing_state">[CustomerInfo_state]</label>
            <select id="billing_state" onchange="this.form.billing_zip.value='';check_address('billing');" name="billing_state" tabindex="9" class="txtBoxStyle">
            </select>
            <!--START: req_billing_state--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_state-->
            <div class="clear"></div>
          </div>



<div class="chkField">
            <label for="billing_country">[CustomerInfo_country]</label>
            <select name="billing_country" onchange="check_address('billing');" tabindex="8" class="txtBoxStyle" id="billing_country">
            </select>
            <!--START: req_billing_country--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_country-->
            <div class="clear"></div>
          </div>


          <div class="chkField">
            <label for="billing_address">[CustomerInfo_address]</label>
            <input name="billing_address" type="text" onchange="clearContent(this);[po_box_disabled_billing]" id="billing_address" value="[billing_address]" size="25" tabindex="5" class="txtBoxStyle" />
            <!--START: req_billing_address--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_address-->
            <div class="clear"></div>
          </div>
          <div class="chkField">
            <label for="billing_address2">[CustomerInfo_address2]</label>
            <input name="billing_address2" type="text" onchange="clearContent(this);" id="billing_address2" value="[billing_address2]" size="25" tabindex="6" class="txtBoxStyle" />
            <div class="clear"></div>
          </div>
          <div class="chkField">
            <label for="billing_city">[CustomerInfo_city]</label>
            <input name="billing_city" type="text" onchange="clearContent(this);" id="billing_city" value="[billing_city]" size="25" tabindex="7" class="txtBoxStyle" />
            <!--START: req_billing_city--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_city-->
            <div class="clear"></div>
          </div>


          <div class="chkField">
            <label for="billing_zip">[CustomerInfo_zip]</label>
            <input name="billing_zip" maxlength="15" type="text" id="billing_zip" value="[billing_zip]" size="10" tabindex="10" class="txtBoxStyle" onchange="clearContent(this);check_address('billing');" />
            <!--START: req_billing_zip--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_zip-->
            <div class="clear"></div>
          </div>

                  <div class="chkField">
            <label for="billing_phone">[CustomerInfo_phone]</label>
            <input name="billing_phone" type="text" onchange="clearContent(this);" id="billing_phone" value="[billing_phone]" size="25" tabindex="5" class="txtBoxStyle" />
            <!--START: req_billing_phone--> 
            <img src="assets/templates/common/images/error2.gif" width="12" height="12" alt="" /> 
            <!--END: req_billing_phone-->
            <div class="clear"></div>
          </div>

        <div class="clear"></div>

我收到以下错误。

Uncaught TypeError: $ is not a function
    at window.onbeforeunload

新错误

Uncaught TypeError: $ is not a function
    at checkout_one.asp:1903
    at dispatch (jquery.min.js:2)
    at y.handle (jquery.min.js:2)

添加后

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

到目前为止，我还没有从代码中的任何地方调用该脚本。

Answer 1

<script>    

$( window ).load(function() {

    if (sessionStorage.getItem('billing_firstname') == "billing_firstname") 
    {
        return;
    }

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

    var billing_state= sessionStorage.getItem('billing_state');
    if (billing_state !== null) $('#billing_state').val(billing_state);

    var billing_country= sessionStorage.getItem('billing_country');
    if (billing_country!== null) $('#billing_country').val(billing_country);


}
});


 $( window ).unload(function() {

    sessionStorage.setItem("billing_firstname", 
    $('#billing_firstname').val());
    sessionStorage.setItem("billing_state", $('#billing_state').val());
    sessionStorage.setItem("billing_country", $('#billing_country').val());
});

</script>

并在包含的任何脚本库或此代码之前包含 jquery ...第一个脚本应该是 jquery :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请在此之后发布错误，因为您使用 jquery $("") 而不使用 jquery 我认为您以错误的方式混合了 js 和 jquery 。请检查一次。