如何永久存储用户数据

Question

I am currently doing a school project and I am in charge of making a forum from scratch. 我目前正在做一个学校项目，并负责从头开始创建一个论坛。 I was intending to create a "Add Section" button, which when clicked, creates a new question box. 我打算创建一个“添加部分”按钮，单击该按钮会创建一个新的问题框。 However I am not sure on how I should go about doing it. 但是，我不确定应该如何去做。

What I am able to achieve so far, is to utilize the data the users pass on towards me, but I am unable to ensure that it stays on my code once the user has refresh. 到目前为止，我能够实现的是利用用户传递给我的数据，但是一旦用户刷新后，我将无法确保它仍保留在我的代码中。 Is it a limitation of local storage? 它是本地存储的限制吗？ And if it is, any alternative in which I would be able to use? 如果可以的话，我可以使用任何替代方法吗？

Page 1 of my code 我的代码的第1页

<!doctype html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="Testing.css">
  <script>
  function addNew(){
  var datatwo = localStorage.datatwo;
  var newData = document.createTextNode(datatwo);
  var hello = document.createElement("th");
  hello.appendChild(newData);
  document.getElementById("Questions").appendChild(hello);
}
  </script>
  </head>

  <body>
    <div id="Addnew">
      <button onclick="addNew()" id ="AddNewButton">Add new </button>
    </div>
    <h1>This is Page 1 </h1>
    <table>
      <tr id="Questions">
        <th>What is my Name</th>
        <th>What is his name</th>

      </tr>

      <tr>
        <td>Justin</td>
        <td>James</td>
      </tr>
    </table>
        <nav>
            <div id="footerPages">

                  <ul>
                        <li><p>Page 1 of 3</p></li>
                        <li><a href=""> < Prev </a></li>
                        <li><a href="#"> 1 </a></li>
                        <li><a href="Testing2.html"> 2 </a></li>

                        <li><a href="#"> 3 </a></li>
                        <li><a href="#"> 4 </a></li>
                        <li><a href="#"> 5 </a></li>
                        <li><a href="#"> 6 </a></li>
                        <li><a href="#"> 7 </a></li>
                          <li><a href="Testing2.html"> Next ></a></li>
                 </ul>
            </div>
          </nav>




  </body>

</html>

Page 2 of my code 我的代码的第2页

<!doctype html>
<html>
  <head>
  <link rel="stylesheet" type="text/css" href="Testing.css">
  <script>
   function addNew(){
     var data = prompt("What is your question?");
     localStorage.datatwo = data;

   }
  </script>
  </head>

  <body>
    <div id="Addnew">
      <button onclick="addNew()" id ="AddNewButton">Add new </button>
    </div>
    <h1>HI THIS IS PAGE 2</h1>
    <table>
      <tr id="Questions">
        <th>What is my Name</th>
        <th>What is his name</th>

      </tr>

      <tr>
        <td>Justin</td>
        <td>James</td>
      </tr>
    </table>
        <nav>
            <div id="footerPages">

                  <ul>
                        <li><p>Page 1 of 3</p></li>
                        <li><a href="Testing.html"> < Prev </a></li>
                        <li><a href="Testing.html"> 1 </a></li>
                        <li><a href="#"> 2 </a></li>
                        <li><a href="#"> 3 </a></li>
                          <li><a href="#"> Next ></a></li>
                 </ul>
            </div>
          </nav>




  </body>

</html>

Answer 1

It's 它的

localStorage.setItem(key, value);
localStorage.getItem(key, value);

Your code is not persistent because you are just setting some property to the object. 您的代码不是持久性的，因为您只是为对象设置了一些属性。

Answer 2

As you said you are currently doing a school project so i am not blaming you for using plain javascript (without javascript framework) in your project. 如您所说，您当前正在做一个学校项目，所以我不怪您在项目中使用普通javascript（无javascript框架）。 But you may use jQuery to make it easier. 但是您可以使用jQuery来简化它。

LocalStorage is used to store the data locally (permanently for you). LocalStorage用于在本地存储数据（永久地为您存储）。 SessionStorage is used to store the data per session/tab. SessionStorage用于按会话/选项卡存储数据。

I think you want to update stored data to page 1. To do this change your script tag as 我认为您想将存储的数据更新到第1页。为此，请将您的脚本标签更改为

<script>
  function addNew(){
  var questionHead = document.createTextNode("Your Question");

  var queHeadElement = document.createElement("th");
  queHeadElement.appendChild(questionHead);
  document.getElementById("Questions").appendChild(queHeadElement);

  var datatwo = localStorage.datatwo;
  var newQuestionText = document.createTextNode(datatwo);
  var newQuestionTextElement = document.createElement("td");
  newQuestionTextElement.appendChild(newQuestionText);
  document.getElementById("myNewQuestion").appendChild(newQuestionTextElement);
}
  </script>

And change your table with this 然后用这个来改变你的桌子

<table>
  <tr id="Questions">
    <th>What is my Name</th>
    <th>What is his name</th>

  </tr>

  <tr id="myNewQuestion">
    <td>Justin</td>
    <td>James</td>
  </tr>
</table>

Using this code, latest data from the localStorage will be displayed in the table with button click. 使用此代码，单击按钮将在表中显示localStorage的最新数据。

Above code will work fine. 上面的代码可以正常工作。 But i want to mention one more thing here. 但我想在这里再提一件事。

<li><a href=""> < Prev </a></li>

If you want to use less then or greater then symbols like < Prev browser will treat as if Prev is an html element. 如果要少用或多用，则<Prev浏览器之类的符号将视为Prev是html元素。 And browser will try to find its closing tag as <Prev/> or <Prev></Prev>. 浏览器将尝试找到其结束标记为<Prev />或<Prev> </ Prev>。 Although above code is working here but it should not be written in this way. 尽管上面的代码在这里起作用，但是不应以这种方式编写。 You should always use < 您应该始终使用< for < symbol and > 对于<符号和> for > 对于>

<li><a href=""> &gt; Prev </a></li>

I hope this answer will help you in your project. 希望这个答案对您的项目有所帮助。 Best of luck for your project. 祝您项目顺利。

如何永久存储用户数据

问题描述

2 个解决方案

解决方案1
0 2016-07-17 07:29:09

解决方案2
0 2016-07-17 07:40:39

如何永久存储用户数据

问题描述

2 个解决方案

解决方案1 0 2016-07-17 07:29:09

解决方案2 0 2016-07-17 07:40:39

解决方案1
0 2016-07-17 07:29:09

解决方案2
0 2016-07-17 07:40:39