Javascript 如何在重新加载/刷新页面后通过搜索功能执行本地存储值

我使用以下表单和脚本让用户根据他们提供的输入过滤td表。它过滤表中的行，只显示与其给定值对应的行。他们可以更新所看到的行，完成此操作后，页面将刷新/重新加载以刷新表。刷新/重新加载页面后，搜索筛选器再次显示所有行。我正在寻找一种方法，根据它们的过滤器输入，保留它们在更新事件发生之前拥有的行。换句话说，好像刷新从未发生过

检索表

...

<p align='left' style="display:inline">
  <table class="userprof" align='left'>
    <tr>
      <td class="footer">Filter:
        <input type="text" id="myInput" name="filter" style="color:black !important;" placeholder="Filter table" onkeyup='saveValue(this);' />

      </td>
    </tr>
  </table>
</p>
...

我使用以下脚本筛选表行

...

function filterTable(event) {
  var filter = event.target.value.toUpperCase();
  var rows = document.querySelector("#myTable tbody").rows;

  for (var i = 0; i < 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) > -1 || rankCol.indexOf(filter) > -1 || rankerCol.indexOf(filter) > -1 || typeCol.indexOf(filter) > -1 || emailCol.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

document.querySelector('#myInput').addEventListener('keyup', filterTable, false);

...

。。。
函数filterTable（事件）{
var filter=event.target.value.toUpperCase（）；
var rows=document.querySelector（“#myTable tbody”）.rows；
对于（变量i=0；i-1 | rankCol.indexOf（filter）>-1 | rankerCol.indexOf（filter）>-1 | typeCol.indexOf（filter）>-1 | emailCol.indexOf（filter）>-1）{
行[i].style.display=“”；
}否则{
行[i].style.display=“无”；
}
}
}
document.querySelector（“#myInput”）.addEventListener（'keyup'，filterTable，false）；
...

您就快到了，只需稍作修改即可实现。 我建议你把流量调高一点

首先从HTML中删除

onkeyup

内联侦听器。您当前在1个元素上收听了3次该事件，这似乎有些过头了

...

<p align='left' style="display:inline">
  <table class="userprof" align='left'>
    <tr>
      <td class="footer">Filter:
        <input type="text" id="myInput" name="filter" style="color:black !important;" placeholder="Filter table" />
      </td>
    </tr>
  </table>
</p>
...

---

谢谢你的反应。我已经把我的代码改为上面的代码，改为我的php文件。现在，它在重新加载和打开页面时调用存储的过滤器。但不可能更改存储的过滤器。它似乎除了过滤它在storrage中保存的值之外什么都不做。是否在脚本底部添加了

keyup

事件处理程序？你能记录下事件处理程序是否被调用吗？我复制了整个代码并将其粘贴为一个脚本。我对这件事有点陌生。如何记录事件以查看它是否被调用？在

函数（事件）{

函数中使用

console.log（事件）

将当前事件对象记录到控制台。在控制台中，您可以输出消息、数据和脚本中的所有值。这是一个重要的开发人员工具。我收到以下错误。accounts.php:993 Uncaught TypeError:value.toUpperCase不是filterTable（accounts.php:993）上的函数at HTMLInputElement.Uncaught ReferenceError:filterTable未在accounts中定义。php:155 Uncaught TypeError:无法读取accounts处null的属性“addEventListener”。php:1035

...

<p align='left' style="display:inline">
  <table class="userprof" align='left'>
    <tr>
      <td class="footer">Filter:
        <input type="text" id="myInput" name="filter" style="color:black !important;" placeholder="Filter table" />
      </td>
    </tr>
  </table>
</p>
...

// Store the input in a variable for reference.
var myInput = document.getElementById("myInput");
var savedValue = getSavedValue("myInput");

// Immediately filter the table and set the input value.
filterTable(savedValue);
myInput.value = savedValue;

//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 "v" from localStorage. 
function getSavedValue(v) {
  if (!localStorage.getItem(v)) {
    return ""; // You can change this to your default value. 
  }
  return localStorage.getItem(v);
}

function filterTable(value) {
  console.log(value);
  var filter = value.toUpperCase();
  var rows = document.querySelector("#myTable tbody").rows;

  for (var i = 0; i < 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) > -1 || rankCol.indexOf(filter) > -1 || rankerCol.indexOf(filter) > -1 || typeCol.indexOf(filter) > -1 || emailCol.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

myInput.addEventListener('keyup', function(event) {
  var value = event.target.value;
  saveValue(event);
  filterTable(value);
});