在JAVASCRIPT中重新加载页面时保存变量的当前值

Question

如果有的话，有没有一种方法可以在页面刷新时保持变量值

var x = 0;

但是用户执行了一些使该价值变为

x = 4;

然后刷新页面，是否有办法将x变量的值保持为4，否则它将始终重置为原始值？

我已经编写了2个函数来设置和获取如下值：

     function SetlifeCounter()
      {
        life = 3;
        localStorage.setItem("life", life);
       }

      function GetlifeCounter()
       {
         life1 = localStorage.getItem("life");
           life1=life1-1;
         return life1;
       }

然后以这种方式调用它们：

  var mainLife;
  SetlifeCounter();
    mainLife=GetlifeCounter();
    while(mainLife!=0)
    {

        window.location.reload();
    }

但是，当我运行此页面时，页面冻结了……我在做什么错？

PS这是要跟踪的否。 每当您在游戏中死亡（重新加载页面）时，游戏中的生命就会被扣除。

Answer 1

是的，请使用localStorage 。

使用持久值时，您需要检查一个值是否已经保存（来自用户的上一次访问），如果已保存，请使用它。 如果不是，则需要创建一个值并将其设置为存储，以便在以后的访问中可以使用它。

通常这样做是这样的：

var x = null;

// Check to see if there is already a value in localStorage
if(localStorage.getItem("x")){

  // Value exists. Get it assign it:
  x = localStorage.getItem("x");

} else {

  // Value doesn't exist. Set it locally and store it for future visits
  x = 3.14;
  x = Math.floor(x);

  localStorage.setItem("x", x); 

}

在您的示例中，您遇到了各种各样的问题，但是浏览器被锁定是由于while循环，当生命计数不为零时，它将创建一个无限循环。 对于while循环，您必须非常小心，并确保它们始终会遇到终止条件。 但是，出于您的目的，这还是不必要的。

有关正确使用localStorage详细信息，请参见下面的内联评论。

注意：由于沙箱操作，此代码在Stack Overflow代码片段编辑器中无法在此处工作，但您可以在此处查看此工作示例。

 // This is where you will store the lives remaining // You don't need several variables to keep track of this // (mainLife, life, life1). Just modify this one variable as needed. var lifeCount = null; // As soon as the user arrives at the page, get or set the life count window.addEventListener("DOMContentLoaded", initLifeCount); // By convention use camelCase for identifier names that aren't constructors // and put opening curly brace on same line as declaration function initLifeCount() { // You need to test to see if an item exists in localStorage before getting it if(localStorage.getItem("life")){ // And, remember that localStorage values are stored as strings, so you must // convert them to numbers before doing math with them. lifeCount = parseInt(localStorage.getItem("life"), 10) - 1; // Test to see if there are any lives left if(lifeCount === 0){ // Invoke "Game Over" code alert("Game Over!"); } } else { // User hasn't previously stored a count, so they must be starting a new game lifeCount = 3; } // Any time the count changes, remember to update it in localStorage updateLifeCount(); // Temporary code for debugging: console.log("Life count is: " + lifeCount); } // Call this function after the life count changes during game play function updateLifeCount(){ localStorage.setItem("life", lifeCount) } 

如果打开开发人员工具（F12）并浏览以查看localStorage ，则每次重新运行Fiddle时，都将看到该值减少。 您还可以在控制台中查看该值。

Answer 2

许多。 您可以选择Cookie，本地存储，Web sql，远程后端...

请参阅以下有关在Cookie中设置值的问题：

设置cookie并使用JavaScript获取cookie

对于本地存储，请使用：

localStorage.setItem("x", x);