我的页面上有一些图像，当单击其中一张图像时，会发送 POST 数据，刷新页面，并且 Javascript 变量会递增。我的问题是如何让 JS 变量不重置为页面重新加载时我初始化的值？我之前也尝试过使用 localstorage 保存变量，但变量仍然被重置 - 这是合乎逻辑的，因为我在同一个文档中进行了初始化，但我不知道我该怎么做。
我是 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 或类似的方式发布它。 (希望这能让我作为初学者变得更简单。)
最佳答案
这是一个非常基本的示例，说明如何使用 localStorage 并设置简单的 session getter/setter 来通过页面刷新操作数据。
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);
关于javascript - 如何避免 Javascript 变量在页面刷新时被重置？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39838058/