从表单输入存储数据并在页面刷新后重新加载javascript函数

in my Wordpress with Woocommerce plugin, im having sidebar with calculator of three inputs, where i get my entry values for calculating.

<form method="get" id="calculator">

    <div class="row">

        <input value="0" type="text" id="val-x" name="val-x" onkeyup="calculate(this.value, document.getElementById('cart').value)">

    </div>

    <div class="row">

        <input value="0" type="text" id="val-y" name="val-y" onkeyup="calculate2(this.value, document.getElementById('cart').value)">

    </div>

    <div class="row">

        <input type="text" id="cart" readonly="readonly" value="<?php 
            $cart = WC()->cart->get_cart_total();
            $cart = strip_tags($cart);

            echo mb_substr($cart, 0, -7); ?>">
    </div>

Then there is submit button, which i dont want to be visible. Inside the two span elements with ids #result and #result2, JS function should dynamically calculate results onkeyup event in inputs.

<div class="row">

            <input value="Calculate" type="submit" id="submit-btn" name="submit-btn" class="btn" onclick=""><!-- This submit button should be hidden all time! -->

        </div>

        <div><strong>Result </strong> <span id="result" style="color: red; font-size: 1.5em;">0</span></div>

        <div><strong>Result 2 </strong> <span id="result2" style="color: red; font-size: 1.5em;">0</span></div>


    </form>

These are my jquery functions

jQuery(window).unload(saveSettings);
    loadSettings();

    function loadSettings() {
        var val_x   = $('#val-x');
            val_y = $('#val-y');

        val_x.val(localStorage.val_xx);
        val_y.val(localStorage.val_yy);
    }

    function saveSettings() {
        localStorage.val_xx = val_x.val();
        localStorage.val_yy = val_y.val();
    }

    var val_x,val_y,cart,result,result2;
    function roundToTwo(num) {    
        return +(Math.round(num + "e+2")  + "e-2");
    }

    function finalCalc(){

        function calculate (val_x, cart) {

            result = val_x - cart;

            if(result<0){
                result = 0;
            }else{
                result;
            }

            document.getElementById("result").innerHTML = roundToTwo(result);

        };

        function calculate2 (val_y, cart) {

            result2 = cart/val_y;

            if(result2<0){
                result2 = 0;
            }else{
                result2;
            }

            document.getElementById("result2").innerHTML = roundToTwo(result2);

        };

    };

• so, calculator works fine at all. But theres a problem for me, with storing data. The default value of inputs is "undefined". I tried to write default value with if/else statement for null value and "undefined" value, it worked, but the storage of the inputs data stopped working in that case.

Ive tried this code to fix the default value of localstorage, but after refresh i always get value "0" instead of saved value of input.

if (localStorage.val_xx === null && localStorage.val_xx === "undefined") {
                localStorage.val_xx.value = "0";
            } else if (localStorage.val_xx !== null && localStorage.val_xx !== "undefined"){
                localStorage.val_xx.value = val_x.val();
            }

• theres another problem with im having trouble for few days. When I reload the page, and the values in inputs stay the same, the function in inputs onkeyup doesnt launch (logically), so the results in span elements are default "0". My question is, if there is some cheat, what can launch onkeyup function without onkeyup?(I realize this question sounds little stupid :D)
• the similar problem occurs, when you added values to input, and after that you add some product to your shopping cart. Values are not calculate, because of the onkeyup function thats not launched.

I realize that this question looks like I have not tried to solve this problems, but believe me, im not so skilled in programming and I have already spent few days with solving this stupid calculator.

2.Use document. ready jquery function to set/reset fields when a page reloads -

$(document).ready(function() {
      calculate($('#val-x').val(), $('#cart').val());
      calculate2($('#val-y').val(), $('#cart').val());
    }

3.Try adding event handler onchange to cart and call calculate and calculate2 from it.

EDIT: You have to take care of the fact that onchange will not be called if the value is changed dynamically (not by user input). After adding the onchange handler you need to trigger the 'change' event using JQuery -

$('#cart').trigger('change');

I dint quite understand point 1.

</div>