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

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 将用于如果您需要在选项卡之间分隔