2016-05-19 4 views
0

Я пытаюсь сохранить переменную javascript, чтобы ее можно было обновлять и переносить через html-страницы, используя sessionstorage.нужна помощь в сеансе хранения

В htmlpage1 пользователь может изменить input1 и input2, которые обновляют переменную js total1. В функции CalcTotal1() я попытался использовать sessionStorage.setItem («newtotal1», total1) для хранения total1, поэтому его можно переносить на htmlpage2.

При загрузке htmlpage2 запускается функция RunningTotalCalc2(). В этой функции я попытался использовать sessionStorage.getItem ("newtotal1") для вызова переменной total1, чтобы ее можно было использовать в формуле. К сожалению, total1, похоже, не используется в вычислении для общего числа.

Я не уверен, где ошибка. Это может быть код хранения изображения в CalcTotal1() или RunningTotalCalc2() или, возможно, где-то еще.

Я не мог заставить эту работу работать с 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>  
+3

1) Вы не присваиваете результат 'getItem' ни к чему. 2) Видите ли какие-либо ошибки в консоли? –

+0

@Mike C thanks.1) Теперь я присвоил результат getItem переменной var total1, но текущий общий расчет, похоже, не приписывает значение total1 в вычислении. «) Я не вижу никаких ошибок в консоли. Кажется, что все нормально, когда я не пытаюсь использовать хранилище сеансов. – MikeMcClatchie

ответ

0

Пока две HTML-страницы одни и те же окна, домен/имя хоста, протокол и порт, они должны быть в состоянии разделить объект sessionStorage.

И @ mike-c прав насчет необходимости присвоить значение, которое вы получаете, используя 'getItem', поскольку он в настоящее время отбрасывается, поскольку вы не присваиваете его чему-либо.

+0

приветствует! – MikeMcClatchie

 Смежные вопросы

  • Нет связанных вопросов^_^