在HTML頁面之間維護一個JavaScript變量以發送到數據庫？

Question

我正在爲大學做一個實驗，涉及時間參與者閱讀簡單網頁的時間。由於實驗的性質，我不能告訴他們我在他們訪問該頁面前對他們進行計時，因此在下一頁中，我需要告訴他們他們正在計時，然後提供一個選項，以便選擇是否他們對象使用Python CGI腳本將其數據傳遞到數據庫。

在第一頁的頂部我有這樣的：

<script type="text/javascript" src="timing.js"> 
</script> 

，並在底部我有一個鏈接到他們帶到一個新的頁面，同時也停止計時器：

Click here when you are ready to proceed. 
<button onclick="window.location = 'timer2.html'; stopTime()">Click Here</button> 

...並在.js文件中，我有以下幾點：

var sec = 0; 

function takeTime() 
{ 
    setInterval(function(){sec += 1},1000); 
} 

myTime = takeTime(); 

function stopTime() 
{ 
clearInterval(myTime); 
} 

function showTime() 
{ 
alert("Time is " + sec + " seconds."); 
} 

當我點擊鏈接進入第二頁，T他的「sec」變量重置爲0.如果我從.js文件中取出聲明並將其放在一個單獨的腳本標記之前，它指向第一個HTML頁面中的.js文件，那麼第二個HTML頁面將不會根本不認識變量「sec」。我如何存儲時間，以便我可以將它發送到數據庫或從第二個HTML頁面中刪除它？

Answer 1

一種方法是使用查詢字符串。

<button onclick="window.location = 'timer2.html?time=' + sec">Click Here</button> 

他們將被髮送到例如timer2.html?time=252如果它花了252秒。然後使用How can I get query string values in JavaScript?在timer2.html上獲取此值。

Answer 2

JavaScript變量不會保持從一個頁面加載到下一個頁面的狀態，因此您需要另一種方式來存儲該信息。除了傳遞查詢字符串之外，另一種方法是HTML5本地存儲。使用本地存儲，您可以在瀏覽器中存儲可從同一個域內的一個頁面加載到下一個頁面的數據。

例如，您的第一頁：

var sec = 0; 
localStorage.time = 0; 

function takeTime() 
{ 
    setInterval(function(){sec += 1},1000); 
} 

myTime = takeTime(); 

function stopTime() 
{ 
    clearInterval(myTime); 
    localStorage.time = sec; 
} 

function showTime() 
{ 
alert("Time is " + sec + " seconds."); 
} 

在timer2.html

而且地方：

var sec = localStorage.time;