如何避免在页面刷新时重置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变量？

回答

相关问题