Question

我目前正在做一个学校项目，我需要激发服务器端应用程序。我用它代替的是＆＃34;本地存储＆＃34;但我有一个问题。我可以在我的＆＃34;文本框＆＃34;中找到文本。一旦用户提交了问题，就会叠加在一起。重新加载后，数据仍会显示。但是我不知道如何重新加载之后如何堆叠在它上面。以下是我的测试代码

<!doctype html>
<html>
  <head>



  <body onload="display()">

    <input type="text" id="Name"></input>
    <input type="submit" id="submit" onclick="SavetoStorage()"></input>


    <p id ="hoho">

    </p>
    <script>
      var name;
      var groupOfName = ["Hello", "Chicken", "Pork","Beef"];
    function SavetoStorage() {
      var name = document.getElementById("Name").value;
      groupOfName[groupOfName.length] = name;
      var newone = groupOfName;
      document.getElementById("hoho").innerHTML = newone;
      localStorage.groupOfName = newone;

    }


    function display() {
      var groupOfName = localStorage.groupOfName;
      document.getElementById("hoho").innerHTML = groupOfName;
    }







    </script>
  </head>
  </body>


</html>

Answer 1

您需要动态加载groupOfName变量，如下所示：

var tmp = localStorage.groupOfName; //this is a string
var groupOfName = Array.from(tmp); //turn it into an array

希望这有助于指出正确的方向

Answer 2

您可以使用localstorage中的setItem方法。它使用2个参数：

一个键和一个值

所以你可以这样做：

var inputValue = document.getElementById("Name").value;
localStorage.setItem("name", inputValue);

上面的代码设置了键“name”，该键包含inputValue

现在，您可以通过调用另一个名为getItem的本地存储方法来检索该值：

var retrieveValue = localStorage.getItem("name");

上面的代码检索项目，该项目包含什么？来自输入的值，现在您可以根据需要将其添加到html中

所以这是基础知识但是因为你只有1个输入，这个值会被覆盖，而LocalStorage不支持数组，但是有一个解决方法，所以你可以使用数组，它是这样的：

//this first part converts your array to string
localStorage.setItem("names", JSON.stringify(names));

//The second part returns your item and coverts it to an array again
var storedNames = JSON.parse(localStorage.getItem("names"));

如何使我的提交答案继续堆叠在一起

2 个答案: