2016-05-19 6 views
0

Ich versuche, eine Javascript-Variable zu speichern, so dass es über HTML-Seiten aktualisiert und mit sessionstorage getragen werden kann.Sitzungsspeicher Hilfe benötigt

In htmlpage1 kann der Benutzer Eingabe1 und Eingabe2 ändern, die js Variable total1 aktualisieren. In der Funktion CalcTotal1() habe ich versucht, sessionStorage.setItem ("newtotal1", total1) zu verwenden, um total1 zu speichern, sodass es auf htmlpage2 übertragen werden kann.

Wenn htmlpage2 geladen ist, wird die Funktion RunningTotalCalc2() ausgeführt. In dieser Funktion habe ich versucht, sessionStorage.getItem ("newtotal1") zu verwenden, um die Variable total1 aufzurufen, damit sie in einer Formel verwendet werden kann. Leider scheint total1 in der Berechnung für die laufende Summe nicht verwendet zu werden.

Ich bin mir nicht sicher, wo der Fehler ist. Es könnte der Speichercode für den Speicher in CalcTotal1() oder RunningTotalCalc2() oder anderswo sein.

Ich konnte nicht mit jsfiddle mit mehreren HTML-Seiten arbeiten ... so Entschuldigung für den unordentlichen Code. Sehr dankbar für jede Hilfe. Mike.

<!-- 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>  
+3

1) Das Ergebnis von 'getItem' wird nicht zugewiesen. 2) Siehst du Fehler in deiner Konsole? –

+0

@Mike C thanks.1) Ich habe jetzt das Ergebnis von getItem var total1 zugewiesen, aber die Berechnung der laufenden Summe scheint in der Berechnung keinen Wert für total1 zu ergeben. ") Ich kann keine Fehler in der Konsole sehen. Es scheint gut zu funktionieren, wenn ich nicht versuche, Session-Speicher zu verwenden. – MikeMcClatchie

Antwort

0

Solange die beide HTML-Seiten das gleiche Fenster, Domain/Host-Namen, Protokoll und Port verwenden, sollten sie in der Lage sein, das sessionstorage-Objekt zu teilen.

Und @ mike-c hat recht, wenn es darum geht, den Wert, den Sie mit 'getItem' erhalten, zuzuweisen, da dieser gerade verworfen wird, da Sie nichts zuweisen.

+0

Prost! Alle arbeiten jetzt – MikeMcClatchie