在HTML页面之间维护Javascript变量以发送到数据库？

Question

I'm doing an experiment for university that involves timing how long participants take to read a simple webpage. Because of the nature of the experiment, I can't tell them I'm timing them before they visit the page, so on the following page I need to tell them that they were being timed and then offer an option to opt out if they object to their data being passed on to a database using a Python CGI script.

At the top of the first page I have this:

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

And at the bottom I have a link to take them to the next page, but also to stop the timer:

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

...and in the .js file, I have the following:

var sec = 0;

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

myTime = takeTime();

function stopTime()
{
clearInterval(myTime);
}

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

When I click the link to go the second page, the "sec" variable just resets to 0. If I take the declaration out of the .js file and put it in a separate script tag before the one that refers to the .js file in the first HTML page, the second HTML page doesn't recognise the variable "sec" at all. How can I store the time so that I can then either send it to a database or get rid of it from the second HTML page?

Answer 1

One way is to use the query string.

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

They will be sent to eg timer2.html?time=252 if it took 252 seconds. Then use How can I get query string values in JavaScript? to get this value on timer2.html.

Answer 2

Javascript variables do not maintain their state from one page load to the next, so you will need another way to store that information. Another method besides passing it through the query string is HTML5 Local Storage. Using Local Storage, you can store values in the browser that are retrievable from one page load to the next, within the same domain.

For example, your first page:

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.");
}

And somewhere in timer2.html:

var sec = localStorage.time;