title: How to save input of html textarea after refreshing the page?
body: <p>I currently use the following code to save input after browser refresh.</p>
  <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;style&gt;textarea, input {
  width:100%;
  height:50px
  }
  &lt;/style&gt;
  &lt;textarea class='' id='thetext' onkeyup='saveValue(this)'/&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;button id='' onclick='shift()'&gt;Shift&lt;/button&gt;&lt;br/&gt;&lt;br/&gt;
  &lt;script&gt;
    var input = document.getElementById("thetext");
  function shift() { input.value = input.value.toUpperCase()}
  &lt;/script&gt;
  &lt;script&gt;document.getElementById("thetext").value = getSavedValue("thetext");
    function saveValue(e){
              var id = e.id;  
              var val = e.value;  
              localStorage.setItem(id, val);
          }
         function getSavedValue  (v){
              if (!localStorage.getItem(v)) {
                  return "";
              }
              return localStorage.getItem(v);
          }&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>When a user enters something in the textarea, and leaves the window, the textarea gets stored in local storage, thanks to the onkeyup event listener.</p>
  <p>However, if the user presses the shift button and leaves the browser, the uppercase text value doesn't get stored in textarea because there's no onkeyup action after button press.</p>
  <p>I tried various event listeners instead of onkeyup, like onblur, onunload but none of them are working. Is there any event listener which can record the actions then and there? Or any way else?</p>
  <p>PS - This code isn't working on Stackoverflow, don't know why, however it's working on my webpage. So, Please ignore this issue.</p>