Question

我试图存储一个javascript变量，以便可以使用sessionstorage更新并在html页面中传输它。

在htmlpage1中，用户可以更改更新js变量total1的input1和input2。在函数CalcTotal1（）中，我尝试使用sessionStorage.setItem（＆＃34; newtotal1＆＃34;，total1）来存储total1，因此它可以传递到htmlpage2。

加载htmlpage2时，运行RunningTotalCalc2（）函数。在这个函数中，我尝试使用sessionStorage.getItem（＆＃34; newtotal1＆＃34;）来调用变量total1，以便可以在公式中使用它。不幸的是，total1似乎没有用于计算总计。

我不确定错误在哪里。它可能是CalcTotal1（）或RunningTotalCalc2（）中的seesion存储代码，也可能是其他地方的。

我无法在jsfiddle中使用多个html页面...因此对于凌乱的代码道歉。非常感谢任何帮助。麦克

    <!-- this is htmlpage1 -->

            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
                <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
                <script src="spending2.js"></script>
            </head>
            <body>
                RUNNING TOTAL:
                <div id="chkRunningTotal"></div>
                <br>
                TOTAL 1:
                <div id="chkTotal"></div>
                <br>
                <input type="text" name="input1" id="input1" />
                <input type="button" value="Change Input 1" onclick="GetTotal1(this)" />
                <br>
                <br>
                <input type="text" name="input2" id="input2" />
                <input type="button" value="Change Input 2" onclick="GetTotal1(this)" />

                <script>
            $(document).ready(function() {
                DisplayInputs1();
              GetTotal1();
            });
                </script>
            </body>

    <!-- this is htmlpage2 -->

            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
                <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.35.1/js/bootstrap-dialog.min.js"></script>
                <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
                <script src="spending2.js"></script>
            </head>
            <body>
                RUNNING TOTAL:
                <div id="chkRunningTotal"></div>
                <br>   
                TOTAL 2:
                <div id="chkTotal2"></div>
                <br>
                <input type="text" name="input3" id="input3" />
                <input type="button" value="Change Input 3" onclick="GetTotal2(this)" />
                <br>
                <br>
                <input type="text" name="input4" id="input4" />
                <input type="button" value="Change Input 4" onclick="GetTotal2(this)" />

    <script>
            $(document).ready(function() {
                DisplayInputs2();
              GetTotal2();
            });
                </script>
            </body>

 <script>

    //this is spending2.js

var input1 = 555;
var input2 = 666;
var input3 = 147;
var input4 = 33;

function GetTotal1() {
            CalcTotal1()
            RunningTotalCalc1();
}

function GetTotal2() {
            CalcTotal2()
            RunningTotalCalc2();
}

function RunningTotalCalc1() {
    runningtotal = input1 + input2 + input3 + input4
    $("#chkRunningTotal").html(runningtotal);
}

function RunningTotalCalc2() {
    var total1 = sessionStorage.getItem("newtotal1");
    runningtotal = total1 + input3 + input4
    $("#chkRunningTotal").html(runningtotal);
}

function CalcTotal1() {
    var total1 = 0
    input1 = parseInt($('#input1').val() || 0, 10);
    input2 = parseInt($('#input2').val() || 0, 10);
    total1 = input1 + input2;
    $("#chkTotal").html(total1);
    sessionStorage.setItem("newtotal1", total1);
}

function CalcTotal2() {
    var total2 = 0;
    input3 = parseInt($('#input3').val() || 0, 10);
    input4 = parseInt($('#input4').val() || 0, 10);
    total2 = input3 + input4;
    $("#chkTotal2").html(total2);
}

function DisplayInputs1() {
    document.getElementById("input1").value = input1;
    document.getElementById("input2").value = input2;
}

function DisplayInputs2() {
    document.getElementById("input3").value = input3;
    document.getElementById("input4").value = input4;
}
 </script>

Answer 1

只要两个HTML页面共享同一个窗口，域/主机名，协议和端口，它们就应该能够共享sessionStorage对象。

并且@ mike-c是正确的，需要使用'getItem'来分配你得到的值，因为它当前被丢弃，因为你没有将它分配给任何东西。

需要会话存储帮助

1 个答案: