title: How to store users data permanently
body: <p>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.</p>
  
  <p>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?</p>
  
  <p>Page 1 of my code </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="Testing.css"&gt;
    &lt;script&gt;
    function addNew(){
    var datatwo = localStorage.datatwo;
    var newData = document.createTextNode(datatwo);
    var hello = document.createElement("th");
    hello.appendChild(newData);
    document.getElementById("Questions").appendChild(hello);
  }
    &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="Addnew"&gt;
        &lt;button onclick="addNew()" id ="AddNewButton"&gt;Add new &lt;/button&gt;
      &lt;/div&gt;
      &lt;h1&gt;This is Page 1 &lt;/h1&gt;
      &lt;table&gt;
        &lt;tr id="Questions"&gt;
          &lt;th&gt;What is my Name&lt;/th&gt;
          &lt;th&gt;What is his name&lt;/th&gt;
  
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;Justin&lt;/td&gt;
          &lt;td&gt;James&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
          &lt;nav&gt;
              &lt;div id="footerPages"&gt;
  
                    &lt;ul&gt;
                          &lt;li&gt;&lt;p&gt;Page 1 of 3&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt; &lt; Prev &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt; 1 &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="Testing2.html"&gt; 2 &lt;/a&gt;&lt;/li&gt;
  
                          &lt;li&gt;&lt;a href="#"&gt; 3 &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt; 4 &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt; 5 &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt; 6 &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt; 7 &lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="Testing2.html"&gt; Next &gt;&lt;/a&gt;&lt;/li&gt;
                   &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/nav&gt;
  
  
  
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Page 2 of my code</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="Testing.css"&gt;
    &lt;script&gt;
     function addNew(){
       var data = prompt("What is your question?");
       localStorage.datatwo = data;
  
     }
    &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="Addnew"&gt;
        &lt;button onclick="addNew()" id ="AddNewButton"&gt;Add new &lt;/button&gt;
      &lt;/div&gt;
      &lt;h1&gt;HI THIS IS PAGE 2&lt;/h1&gt;
      &lt;table&gt;
        &lt;tr id="Questions"&gt;
          &lt;th&gt;What is my Name&lt;/th&gt;
          &lt;th&gt;What is his name&lt;/th&gt;
  
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;Justin&lt;/td&gt;
          &lt;td&gt;James&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
          &lt;nav&gt;
              &lt;div id="footerPages"&gt;
  
                    &lt;ul&gt;
                          &lt;li&gt;&lt;p&gt;Page 1 of 3&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="Testing.html"&gt; &lt; Prev &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="Testing.html"&gt; 1 &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt; 2 &lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt; 3 &lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt; Next &gt;&lt;/a&gt;&lt;/li&gt;
                   &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/nav&gt;
  
  
  
  
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>