title: How do I transfer a value between webpages using local storage?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;SwinTech&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form action="apply.html" method="post"&gt;
          &lt;div class="consultantinformation"&gt;
              &lt;h2&gt; Job reference number: &lt;/h2&gt;
              &lt;br&gt;
              &lt;h4 id="jobreference2"&gt; 6LZ9W &lt;/h4&gt;
          &lt;/div&gt;
          &lt;button id="submitbutton"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
      &lt;script&gt;
          document.getElementById("submitbutton").addEventListener("click", setItem);
          localStorage.setItem("jobreference1", "1FN43");
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm trying to transfer &quot;jobreference1&quot; from the 1st snippet to the 2nd using local storage. As you can see, I've stored it in one external JavaScript file and sent it to another. But when I try to call it in the HTML code in the 2nd snippet, to which the value was transferred to, it simply doesn't work. I've decided to include all of my HTML and JavaScript code for my second snippet because I believe that's where the issue lies. Thank you.</p>
  <p>Note: no Inline JavaScript or jQuery.</p>