title: Save Data to Localstorage and use it to populate fields after submit
body: <p>I have optin popup of two steps, first step is to capture email and name, when user click submit the data is captured, and another popup appears, the new popup has a form with more fields to get more info, plus email and name field.</p>
  
  <p>what I want to do is to automatically populate the email and name field from first popup and hide them with <code>display:none</code> so user can't see them, after submit the data is captured again (all goes to activecampaign).</p>
  
  <p>the two forms works just fine, what is not working is saving the data and calling it when needed</p>
  
  <p>here is the js I'm using</p>
  
  <pre><code>jQuery(function($){
    // PART I: Saving user details locally
  
      $('#arlington-field-submit').on('click', function(){
  
      // check if the user's browser has localStorage support
      if (typeof(Storage) !== "undefined") {
          // Code for localStorage/sessionStorage.
          // store the full name in localStorage
          var fullname = document.querySelector("input[name=arlington-name]");
          localStorage.user_name = fullname.value;
  
          // save the email in localStorage
          var email = document.querySelector("input[name=arlington-email]");
            $("input[name=fullname]").val(localStorage.getItem("server"));
          localStorage.user_email = email.value;
  
      }
    });
  
    // PART II: Pre-filling forms forms with locally saved values
    if (typeof(Storage) !== "undefined") {
  
      // check if the user has a name field stored 
      if (localStorage.user_name) {
        name_field = document.querySelector("._form input[name=fullname]");
        name_field.value = localStorage.user_name;
      }
  
      // check if the user has an email field stored
      if (localStorage.user_email) {
        email_field = document.querySelector("._form input[name=email]");
        email_field.value = localStorage.user_email;
      }
  
      }
  });
  </code></pre>
  
  <p>first form html:</p>
  
  <pre><code>    &lt;div id="arlington-element-form" class="arlington-element-form arlington-element" data-element="form"&gt;
  &lt;div id="arlington-form" class="arlington-form arlington-has-name-email arlington-has-buttons"&gt;
     &lt;div class="arlington-form-wrap"&gt;&lt;input id="arlington-field-comments" name="arlington-comments" type="text" data-selectable="true" data-target="#builder-setting-comments_value" class="arlington-field-comments" placeholder="" value="" style="" autocomplete="off"&gt;&lt;input id="arlington-field-name" name="arlington-name" type="text" data-selectable="true" data-target="#builder-setting-name_value" class="arlington-field-name" placeholder="Enter your name here..." value=""&gt;
     &lt;input id="arlington-field-email" name="arlington-email" type="email" data-selectable="true" data-target="#builder-setting-email_value" class="arlington-field-email" placeholder="Enter your email address here..." value="" &gt;
   &lt;input id="arlington-field-submit" name="arlington-submit" type="submit" data-selectable="true" data-target="#builder-setting-submit_value" class="arlington-field-submit" value="JOIN NOW" &gt;
     &lt;/div&gt;
     &lt;div class="arlington-yesno-wrap"&gt;
     &lt;button id="arlington-button-yes" type="button" name="arlington-yes" data-selectable="true" data-target="#builder-setting-yes_value" data-action="form" data-type="yes" class="arlington-button-yes arlington-button-yesno"&gt;Submit!&lt;/button&gt;
     &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>second form html:</p>
  
  <pre><code>&lt;form method="POST" action="xxxxxx" id="_form_8_" class="_form _form_8 _inline-form _dark" novalidate&gt; &lt;input type="hidden" name="u" value="8" /&gt; &lt;input type="hidden" name="f" value="8" /&gt; &lt;input type="hidden" name="s" /&gt; &lt;input type="hidden" name="c" value="0" /&gt; &lt;input type="hidden" name="m" value="0" /&gt; &lt;input type="hidden" name="act" value="sub" /&gt;    &lt;input type="hidden" name="v" value="2" /&gt;
      &lt;div class="_form-content"&gt;
          &lt;div class="_form_element _x72304349 _full_width "&gt; &lt;label class="_form-label"&gt; Full Name &lt;/label&gt;
              &lt;div class="_field-wrapper"&gt; &lt;input type="text" name="fullname" placeholder="Type your name" /&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="_form_element _x10201592 _full_width "&gt; &lt;label class="_form-label"&gt; Email* &lt;/label&gt;
              &lt;div class="_field-wrapper"&gt; &lt;input type="text" name="email" placeholder="Type your email" required/&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="_form_element _x29901314 _full_width "&gt; &lt;label class="_form-label"&gt; Phone &lt;/label&gt;
              &lt;div class="_field-wrapper"&gt; &lt;input type="text" name="phone" placeholder="Type your phone number" /&gt; &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="_button-wrapper _full_width"&gt; &lt;button id="_form_8_submit" class="_submit" type="submit"&gt; Submit &lt;/button&gt; &lt;/div&gt;
          &lt;div class="_clear-element"&gt; &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>