title: How to execute local stored value by search function afther page reload / refresh
body: <p>I use the following form and script to let users filter a td table on the input they give in. It filters the rows of the table and only shows the rows corresponding to their given value. They can update the rows that they are seeing, after they do this the page refreshes/reloads to refresh the table. After the page is refreshed/reloaded the search filter shows all rows again. I am searching for a way to keep the rows that they had before the update event happend based on their filter input. In other words, as if the refresh never happend.</p>
  <p>Search form;</p>
  <pre><code>...
  
  &lt;p align='left' style=&quot;display:inline&quot;&gt;
    &lt;table class=&quot;userprof&quot; align='left'&gt;
      &lt;tr&gt;
        &lt;td class=&quot;footer&quot;&gt;Filter:
          &lt;input type=&quot;text&quot; id=&quot;myInput&quot; name=&quot;filter&quot; style=&quot;color:black !important;&quot; placeholder=&quot;Filter table&quot; onkeyup='saveValue(this);' /&gt;
  
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/p&gt;
  ...
  
  </code></pre>
  <p>I use the folowing script to save their input as localstorage.</p>
  <pre><code>...
  
  document.getElementById(&quot;myInput&quot;).value = getSavedValue(&quot;myInput&quot;); // set the value to this input 
  /* Here you can add more inputs to set value. if it's saved */
  
  //Save the value function - save it to localStorage as (ID, VALUE)
  function saveValue(e) {
    var id = e.id; // get the sender's id to save it . 
    var val = e.value; // get the value. 
    localStorage.setItem(id, val); // Every time user writing something, the localStorage's value will override . 
  }
  
  //get the saved value function - return the value of &quot;v&quot; from localStorage. 
  function getSavedValue(v) {
    if (!localStorage.getItem(v)) {
      return &quot;&quot;; // You can change this to your defualt value. 
    }
    return localStorage.getItem(v);
  }
  
  ...
  </code></pre>
  <p>I use the following script to filter the table rows</p>
  <pre><code>...
  
  function filterTable(event) {
    var filter = event.target.value.toUpperCase();
    var rows = document.querySelector(&quot;#myTable tbody&quot;).rows;
  
    for (var i = 0; i &lt; rows.length; i++) {
      var nameCol = rows[i].cells[1].textContent.toUpperCase();
      var rankCol = rows[i].cells[2].textContent.toUpperCase();
      var rankerCol = rows[i].cells[5].textContent.toUpperCase();
      var typeCol = rows[i].cells[6].textContent.toUpperCase();
      var emailCol = rows[i].cells[3].textContent.toUpperCase();
      if (nameCol.indexOf(filter) &gt; -1 || rankCol.indexOf(filter) &gt; -1 || rankerCol.indexOf(filter) &gt; -1 || typeCol.indexOf(filter) &gt; -1 || emailCol.indexOf(filter) &gt; -1) {
        rows[i].style.display = &quot;&quot;;
      } else {
        rows[i].style.display = &quot;none&quot;;
      }
    }
  }
  
  document.querySelector('#myInput').addEventListener('keyup', filterTable, false);
  
  ...
  </code></pre>