如何避免在頁面刷新時重置Javascript變量？

我在頁面上有一些圖像，當點擊其中一個圖像時，POST數據被髮送，頁面刷新並且Javascript變量增加。我的問題是如何獲得JS變量不重置爲我重新加載頁面時啓動它的值？我之前也曾嘗試使用localstorage保存變量，但該變量仍然重置 - 這是合乎邏輯的，因爲我在同一文檔中進行了初始化，但我不知道該如何做。如何避免在頁面刷新時重置Javascript變量？

我是Javascript新手，希望儘可能簡單（如果可能，請獲得一個虛擬答覆）。

下面是我的代碼，用相應的JavaScript在身體的開始（也有單獨的文件中一些無關痛癢的PHP）：

<?php 
$subtest_nr = "7"; 
$counter = 0; 
require_once('php.php'); 
?> 

<!DOCTYPE html> 
<html> 
<head> 
<title>Title</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<link rel="stylesheet" href="styles.css"> 
<script src="jquery-3.1.1.min.js"></script> 
<script src="scripts.js"></script> 
</head> 

<body> 
<script> 
var counter = 0; 
$(document).ready(function(){ 
    $("img").click(function(){ 
     counter += 4; 
     $("#test").text(counter); //for testing 
    }); 
    $("#test").text(counter); //for testing 
}); 

jQuery(function($) { 
    // Hide/suppress the submit button 
    $('input[type="submit"]').closest('div').hide(); 
    // Bind to change event for all radio buttons 
    $('input[type="radio"]').on('change', function() { 
     // Submit the form ("this" refers to the radio button) 
     $(this).closest('form').submit(); 
    }); 
}); 
</script> 

<div class="main"> 
    <div id="test"></div> 
    <?php $data = getData($subtest_nr); ?> 
    <form id="myform" method="post"> 
    <div class="four_images"> 
      <div class="flex-item"> 
       <input type="radio" name="image" value="7.11" id="alt1" class="hidden"> 
       <label for="alt1"><img src="images/<?php echo $data[$counter+0]; ?>"></label> 
      </div> 
      <div class="flex-item"> 
       <input type="radio" name="image" value="7.12" id="alt2" class="hidden"> 
       <label for="alt2"><img src="images/<?php echo $data[$counter + 1]; ?>"></label> 
      </div> 
      <div class="flex-item"> 
       <input type="radio" name="image" value="7.13" id="alt3" class="hidden"> 
       <label for="alt3"><img src="images/<?php echo $data[$counter+2]; ?>"></label> 
      </div> 
      <div class="flex-item"> 
       <input type="radio" name="image" value="7.14" id="alt4" class="hidden"> 
       <label for="alt4"><img src="images/<?php echo $data[$counter+3]; ?>"></label> 
      </div> 
      <div> 
       <input type="submit" name="save" value="Save Image Selection"> 
      </div> 
    </div> 
    </form> 
</div> 

</body> 
</html>

我可以補充一點，我想保持頁面刷新因爲後來我想將遞增的變量傳遞給php，而不必使用Ajax或類似的方式發佈它。（希望這會讓初學者更簡單。）

來源

2016-10-03 Ingrid

您需要使用localStorage的持有價值，當頁面初始化或者甚至更好，你讀它，有PHP持有的價值，並將其寫入到頁面 – epascarello

您使用'localStorage'在正確的軌道上，所有你需要做的就是檢查它在初始化之前是否存在它的起始值，所以它不會被重置。您也可以在PHP中使用會話。 –

@SpencerWieczorek啊，當然！謝謝！會試試這個。 – Ingrid

下面是如何使用localStorage並設置簡單會話獲取器/設置器來操縱頁面刷新數據的一個非常基本的示例。

function setSessionItem(name, value) { 
    var mySession; 
    try { 
     mySession = JSON.parse(localStorage.getItem('mySession')); 
    } catch (e) { 
     console.log(e); 
     mySession = {}; 
    } 

    mySession[name] = value; 

    mySession = JSON.stringify(mySession); 

    localStorage.setItem('mySession', mySession); 
} 

function getSessionItem(name) { 
    var mySession = localStroage.getItem('mySession'); 
    if (mySession) { 
     try { 
      mySession = JSON.stringify(mySession); 
      return mySession[name]; 
     } catch (e) { 
      console.log(e); 
     } 
    } 
} 

function restoreSession(data) { 
    for (var x in data) { 
     //use saved data to set values as needed 
     console.log(x, data[x]); 
    } 
} 



window.addEventListener('load', function(e) { 
    var mySession = localStorage.getItem('mySession'); 
    if (mySession) { 
     try { 
      mySession = JSON.parse(localStorage.getItem('mySession')); 
     } catch (e) { 
      console.log(e); 
      mySession = {}; 
     } 
     restoreSession(mySession); 
    } else { 
     localStorage.setItem('mySession', '{}'); 
    } 

    setSessionItem('foo', Date.now()); //should change each time 

    if (!mySession.bar) { 
     setSessionItem('bar', Date.now()); //should not change on refresh 
    } 
}, false);

來源

2016-10-03 19:25:02

您是否介意評論此內容並描述應如何在我的腳本中調用它？ – Ingrid

無論何時設置計數器，您還應該使用setSessionItem方法將值保存到本地存儲。當頁面刷新時，應調用restoreSession方法。在此方法的內部，您可以設置定義邏輯以使用刷新之前保存的值，但不管您喜歡。您也可以使用getSessionItem從您保存的會話對象中獲取單個項目/值。 –

您可以將執行post請求之前的變量存儲到localStorage中，並在頁面加載時從localStorage中讀取計數器變量。 localStorage Browser Support

或者您可以發送計數器變量作爲URL參數，並通過PHP設置計數器。

來源

2016-10-03 18:30:25

如何避免在頁面刷新時重置Javascript變量？

回答

相關問題