title: trying to remove item from localstorage using the key name
body: <p>I am trying to remove item from localstorage or rather clear it on button click. I have written the code but on clicking on the button, it does not clear the localstorage data. this is the variable with the localstorage data</p>
  
  <pre><code>    window.onbeforeunload = function() {
      localStorage.setItem("first_name", $('#inputName').val());
  };
  </code></pre>
  
  <p><strong>EDITTED</strong></p>
  
  <pre><code>window.onload = function() {
      var name = localStorage.getItem("first_name");
      if (name !== null) {
          $('#inputName').val(name);
          alert(name);
      }
  };
  </code></pre>
  
  <p>this is the function to clear storage</p>
  
  <pre><code>function clearStorage(){
  alert('localstorage cleared!');
  localStorage.removeItem('first_name');
  </code></pre>
  
  <p>}</p>
  
  <p>the snippet of the button click code block to clear localstorage data using the key-name</p>
  
  <pre><code>&lt;input type="text" id="inputName" placeholder="Name" required&gt;
  &lt;button onclick="clearStorage()"&gt;clear&lt;/button&gt;
  </code></pre>
  
  <p>on clicking the button in attempt to wipe out the data from the localstorage and refreshing the page, the localstorage data is still in the input value.
  how to clear localstorage content is my challenge</p>