title: Save form data in browser session
body: <p>I have an div that is shown when a form is submitted, but when I refresh the page, my data disappears and I'm searching for a way to preserve my data on page refresh.</p>
  
  <p>I know how to save data in a session, but not an entire form. How do I approach this issue? Is it even possible to save an entire form with Javascript?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function showHide() {
    var div = document.getElementById("hidden_form");
    if (div.style.display == 'none') {
      div.style.display = '';
    } else {
      div.style.display = 'none';
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="product_form" id="product_form" enctype="multipart/form-data" action="admin_products.php" method="post" accept-charset="utf-8" onsubmit="showHide();
                          return false;"&gt;
    &lt;input type="textfield" id="title" name="title" value="" readonly&gt;
    &lt;div id='hidden_form' style="display:none"&gt;
  
      &lt;input type="text" id="name" name="name" value="" placeholder="Product Name"&gt;
  
      &lt;label id="option_1" name="option_1"&gt;Option Name&lt;/label&gt;
      &lt;input type="text" id="optionn" name="optionn" value="" placeholder="Product Name"&gt;
  
    &lt;/div&gt;
  
    &lt;input type="submit" id="add" name="add" value="Save" class="" &lt;!--onclick="myFunction()--&gt;"&gt;</code></pre>
  </div>
  </div>
  </p>