title: How to save user inputs after refreshing the page using local storage
body: <p>I have been struggling with this for some time now. I have several blocks with hourly time slots and I want to make sure every time a user types something and clicks the save button its saved and even after refreshing the page it still remains on the page until they decide to delete what is written and type something new in that box. my html code below and just so you know I just learning JS so any help will be appreciated.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let time = [];
  const addText = (ev) =&gt; {
    let newTime = {
      timeData: document.querySelectorAll("#hour Block, #hourBlock1, #hourBlock2").value,
  
      textData: document.querySelector('.text-input').value
    }
    time.push(newTime);
    localStorage.setItem('My Time', JSON.stringify(time));
  }
  
  document.querySelector('.saveButton').addEventListener('click', addText);
  
  document.querySelector('.text-input').value = localStorage.getItem('addText');</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hourblock"&gt;
    &lt;div id&gt;9A M&lt;/div&gt;
    &lt;input data-hour="9" class="text-input" placeholder=""&gt;&lt;/inputs&gt;
    &lt;button class="saveButton"&gt;&lt;i class="far fa-save fa-2x"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="hourBlock1"&gt;
    &lt;div id&gt;10AM&lt;/div&gt;
    &lt;input data-hour="10" class="text-input" placeholder=""&gt;&lt;/inputs&gt;
    &lt;button class="saveButton"&gt;
                            &lt;i class="far fa-save fa-2x"&gt;&lt;/i&gt;   
                          &lt;/button&gt;
  &lt;/div&gt;
  &lt;div id="hourBlock2"&gt;
    &lt;div id&gt;11AM&lt;/div&gt;
    &lt;input data-hour="11" class="text-input" placeholder=""&gt;&lt;/inputs&gt;
    &lt;button class="saveButton"&gt;
                            &lt;i class="far fa-save fa-2x"&gt;&lt;/i&gt;   
                          &lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>