重新加载/刷新页面后如何保存表格样式可见性样式？

Question

我有一个包含一个表的表，又名嵌套表。 （例如人 -> 宠物数据）。 第一张表显示所有人，第二张表显示每个人的宠物。

我有一个显示嵌套表格的按钮，它显示/隐藏包含宠物的表格数据。

JAVASCRIPT：

function toggletable(id) {
  var tableid = document.getElementById(id);
  tableid.style.display = (tableid.style.display == "table") ? "none" : "table";
}

  

现在，如果我刷新页面，所有表都将再次“无”。 但是，我想要这样，如果我打开一个表，也就是单击调用 function 的按钮打开它，如果我刷新页面，它应该会再次打开。

这是按钮

button id="toggleTableDisplay" class="button-sma" onclick="toggleTable((php echo ($data->get('id')); ?>) php echo "Show pets"?></button>

这是桌子

table name="php echo ($data->get('id')); ?>" style="display: none"  id="php echo ($data->get('id'));"

我不是 100% 确定这里的格式是如何工作的，但我必须更改代码，所以如果你复制/粘贴它就不会工作，因为我必须删除一些？> 等等。

我把它放在一个 pastebin 里：

https://pastebin.com/YH1xS4XB

Answer 1

localStorage保存键->值对。 因此，您可以将表 id 存储为键（因为您已经在使用 id），并将可见性标志的 integer 1 存储为值。 当你显示一张桌子时，你只需运行类似的东西：

localStorage.setItem(table_id, '1');

当你隐藏它时，只需删除条目：

localStorage.removeItem(table_id);

在页面加载时，你遍历你的表并显示它们是否存在 localStorage 条目（这里是 jQuery）：

$('table').each(function(){
    if( localStorage.getItem( $(this).attr('id') ) )
         $(this).show();
})