需要会话存储帮助

Question

我正在尝试存储一个 javascript 变量，以便可以使用 sessionstorage 对其进行更新和跨 html 个页面。

在htmlpage1 中，用户可以更改input1 和input2，从而更新js 变量total1。在函数 CalcTotal1() 中，我尝试使用 sessionStorage.setItem("newtotal1", total1) 来存储 total1，因此它可以被带到 htmlpage2.

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

不知道错在哪里。它可能是 CalcTotal1() 或 RunningTotalCalc2() 或其他地方的 seesion 存储代码。

我无法在具有多个 html 页面的 jsfiddle 上进行此操作...所以对于混乱的代码深表歉意。非常感谢任何帮助。迈克.

    <!-- 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页面共享相同的window、domain/hostname、协议和端口，它们应该能够共享sessionStorage对象。

@mike-c 关于需要分配您使用 'getItem' 获得的值是正确的，因为它目前已被丢弃，因为您没有将它分配给任何东西。

需要会话存储帮助

session storage help needed

javascript

session-storage