title: Show user input on new page with jQuery
body: <p>I have a welcome page that collects the user input and I want this information to be shown on other pages as this is a basic jQuery game for a college assessment.</p>
  <p>I have tried different ways but I either get undefined appear where I want the userName to be shown, or nothing shows at all, I would preferably like this to show when the page loads on page load.</p>
  <p>Any help or suggestions would be greatly appreciated.</p>
  <pre class="lang-js prettyprint-override"><code>// let setAvatar = document.getElementById('userAvatar'); //Stores chosen avatar picture for later use
  const avatarPics = [&quot;avatar1.png&quot;, &quot;avatar2.png&quot;, &quot;avatar3.png&quot;, &quot;avatar4.png&quot;]; // Array to store avatar images for avatar generator
  let randomPic; // This variable will store the index value of the random avatar image in the array for later use
  let score = 0;
  let userName;
  let welcomeUser;
  
  $(document).ready(function() {
    // $('validateInput').validate();
  
    $('#submit').on('click', setStorage)
    userName = document.getElementById('userName').value;
  
    if (userName === '') {
      $('.error-message').show();
    } else {
      window.location.href = 'avatar.html';
    }
  
    function setStorage() {
      let userVal = $('#userName').val();
      localStorage.setItem('userVal', userVal);
    }
  
    window.onload = function() {
      let getName = localStorage.getItem('userVal');
      $('#welcomeUser').html(getName);
    }
  
    // function welcomeUser(){
    //     let welcomeUserName = $('#userName').val();
    //     $('#welcomeUser').text('Hi ' + welcomeUserName);
    // }
  });
  </code></pre>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;div class=&quot;card bg-transparent border-0&quot; style=&quot;width: 25rem; height: 25rem; margin-left: 18%; margin-top: 10%;&quot;&gt;
    &lt;div class=&quot;card-body text-center d-flex flex-column align-items-center&quot;&gt;
      &lt;div class=&quot;display-6 mb-2&quot; id=&quot;welcomeUser&quot;&gt;&lt;/div&gt;
      &lt;h1 class=&quot;card-title display-6 mb-3 mt-5&quot; id=&quot;welcomeUser&quot;&gt;Choose Your Avatar&lt;/h1&gt;
      &lt;div id=&quot;avatar&quot;&gt;&lt;/div&gt;
      &lt;div&gt;
        &lt;button class=&quot;btn btn-lg btn-primary me-5&quot; type=&quot;button&quot; id=&quot;button-addon2 genBtn&quot;&gt;Generate Avatar&lt;/button&gt;
        &lt;button class=&quot;btn btn-lg btn-primary&quot; type=&quot;button&quot; id=&quot;button-addon2 setBtn&quot;&gt;Set Avatar&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>