使用localStorage刷新示例后，如何使更改后的JavaScript变量保持不变

Question

我知道有人之前曾问过这个问题，但我从来没有听过。 我将使用另一个问题作为示例。 假设我有一个值为1的变量，我单击了将其更改为2的按钮。我刷新了，但我希望变量仍保持为2。该问题中有人回答说要使用localStorage，但我不知道一点都不明白。 我尝试了几次，但没有成功。 有人可以举例说明使用它的完整JS文件吗？ 我的意思是我不希望答案只是-“使用它来设置变量：localStorage.setItem（“ test”，test）;并得到它：var test = localStorage.getItem（“ test” ）;“ 我想要所有代码的完整示例。 这就是我在说的，除了我做了这个，所以它不起作用：

<html>
<body onload="getItem()">
  <p id="tt">1</p>
  <button onclick="changeTest()">changetest</button>
</body>
<script>

var test = 1;
localStorage.setItem("test", test);

function changeTest()
{
    test = 2;
    document.getElementById("tt").innerHTML = test;
    localStorage.setItem("test", test);
}

function getItem()
{
    localStorage.getItem("test");
    document.getElementById("tt").innerHTML = test;
}
</script>
</html>

Answer 1

window.localStorage.getItem 返回变量，但不会导入该变量，因为该变量已在脚本中。 例如：

var test = window.localStorage.getItem("test");

您还可以使用window.localStorage.test ，主要区别是不会触发任何存储事件（如果我没记错的话）

Answer 2

您的错误是每次将页面加载时将localstorage.test设置为test = 1。

其次，在get函数中，您没有将localstorage的值分配给测试变量。

这是一个工作代码：

         <!DOCTYPE html>


         <html>
        <body onload="getItem()">
              <script>

        var test ;


          function changeTest()
          {
            test = 2;

          document.getElementById("tt").innerHTML = test;
           localStorage.setItem("test", test);   

          }

        function getItem() 
         {
             alert(typeof localStorage.test === "undefined")
       test=  typeof localStorage.test === "undefined" ? 1 : localStorage.test
       alert(test)
        document.getElementById("tt").innerHTML = test; 
         }    
          </script> 
          <p id="tt">1</p>
         <button onclick="changeTest()">changetest</button>

        </body>

         </html>

使用localStorage刷新示例后，如何使更改后的JavaScript变量保持不变

问题描述

2 个解决方案

解决方案1
0 2014-03-19 23:08:23

解决方案2
0 2014-03-19 23:32:24

使用localStorage刷新示例后，如何使更改后的JavaScript变量保持不变

问题描述

2 个解决方案

解决方案1 0 2014-03-19 23:08:23

解决方案2 0 2014-03-19 23:32:24

解决方案1
0 2014-03-19 23:08:23

解决方案2
0 2014-03-19 23:32:24