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

Maintaining a Javascript variable between HTML pages to send to database?

本文关键字：变量 Javascript 一个 数据库 HTML 之间 维护      更新时间：2023-09-26

我正在为大学做一个实验，涉及参与者阅读一个简单网页的时间。由于实验的性质，我不能在他们访问页面之前告诉他们我正在计时，所以在下面的页面上，我需要告诉他们他们正在计时，然后如果他们反对使用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.");
}

当我点击链接进入第二页时，"sec"变量会重置为0。如果我从.js文件中取出声明，并将其放在第一个HTML页面中引用.js文件的脚本标记之前的一个单独的脚本标记中，那么第二个HTML页面根本无法识别变量"sec"。如何存储时间，以便将其发送到数据库或从第二个HTML页面中删除？

一种方法是使用查询字符串。 
<button onclick="window.location = 'timer2.html?time=' + sec">Click Here</button>

如果花费252秒，它们将被发送到例如timer2.html?time=252。然后使用How can I get query string values in JavaScript？在timer2.html上获取此值。

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;
相关文章：