刷新页面后如何保持复选框状态

Question

我已经看过其他线程，但找不到任何东西。 我有一个复选框，它可以通过更改状态来隐藏某些表列，但是每次刷新后，它都会更改为初始状态（选中），并且这些列也不再隐藏。 刷新后有什么方法可以保持状态？在这种情况下，我可以应用本地存储吗？有没有jQuery的方法？ 下面是一些代码：

编辑：添加了建议的本地存储功能

<script type="text/javascript">
function hide_show_table(col_name)
{
 var checkbox_val=document.getElementById(col_name).value;
 if(checkbox_val=="hide")
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="none";
  }
  document.getElementById(col_name+"_head").style.display="none";
  document.getElementById(col_name).value="show";
 }

 else
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="table-cell";
  }
  document.getElementById(col_name+"_head").style.display="table-cell";
  document.getElementById(col_name).value="hide";
 }
}
</script>

<script>
window.onload = function() {
  const checkbox = document.getElementById('fdt_col');
  checkbox.checked = !!localStorage.getItem('checked');
  checkbox.addEventListener('change', function(){
localStorage.setItem('checked', this.checked);});
}
</script>


echo"<input type='checkbox' name='fdt_col' value='hide' id='fdt_col'
onchange='hide_show_table(this.id);' checked>some text</input><br/>";

谢谢

Answer 1

我看到您正在使用Vanilla javascript，因此您可以像这样使用localStorage：

window.onload = function() {
  const checkbox = document.getElementById('fdt_col');
  checkbox.checked = !!localStorage.getItem('checked');
  checkbox.addEventListener('change', function() {localStorage.setItem('checked', this.checked);});

}

关于localStorage与sessionStorage的注意

localStorage会将您的项目保存在所有标签上，而sessionStorage将用于您需要在标签之间分隔的情况下使用