保持突出显示记录甚至页面刷新javascript

Question

我使用以下代码突出显示表中的多个记录行。当我点击按钮行选中。但是我刷新页面突出显示消失了。有人可以帮助我如何保持突出显示的记录甚至页面刷新。

<script>
function highlight(ctrl) {
  var parent = ctrl.parentNode.parentNode;

  if(parent.classList == "New backChange") {
    parent.classList.remove("backChange");
  }
  else {
    parent.classList.add("backChange");
  }
}
</script>

<style>
.backChange{
    background:red;
}
</style>
<table id="appTable" style="margin-top:10px;" margin-left:10px;="" border="1">
  <tbody>
    <tr>
      <th>Select</th>
      <th>Name</th>
      <th>Location</th>
      <th>Action</th>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
    <tr class="New">
      <td><input id="mapCheck" name="myTextEditBox" type="checkbox"></td>
      <td width="140">Name</td>
      <td width="200">Location</td>
      <td><button type="button" onclick="highlight(this)">select</button></td>
    </tr>
  </tbody>
</table>

Answer 1

因为刷新页面时会重置className。 您可以在刷新页面时使用localStorage保存和读取值

this is usage of localStoeage