需要会话存储帮助答案

【问题标题】：session storage help needed需要会话存储帮助
【发布时间】：2016-05-20 07:53:12
【问题描述】：

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

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

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

我不确定错误在哪里。它可能是 CalcTotal1() 或 RunningTotalCalc2() 或其他地方的视觉存储代码。

我无法在具有多个 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>

【问题讨论】：

1) 您没有将getItem 的结果分配给任何东西。 2) 您是否在控制台中看到任何错误？
@Mike C 感谢。1) 我现在已将 getItem 的结果分配给 var total1 但运行总计计算似乎没有将任何值归因于计算中的 total1。 ") 我在控制台中看不到任何错误。当我不尝试使用会话存储时，它似乎工作正常。

标签： javascript session-storage

【解决方案1】：

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

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

【讨论】：