如何保存对象的打开/关闭状态

Question

我制作了一个组件，它可以可视化一个对象，其中数组和嵌套对象是可折叠的。

它通过循环遍历所有键/索引并使用适当的渲染函数来工作。目前，折叠和扩展操作完全基于 CSS 类。

我现在遇到的问题是我需要让它保持折叠/展开状态。所以基本上我需要一种方法来存储折叠状态信息。并稍后阅读。我什至不确定如何开始。

即使对象被修改，状态也应该保​​持不变。所以当一个新项目被推到数组中间时，它仍然应该打开同样的东西。我应该使用什么数据结构以及如何阅读它？

我没有发布任何代码的原因是我认为没有必要，我完全感兴趣的是如何为数组/对象的折叠/扩展状态构造数据，以便在更新时保持不变对对象/数组进行。

我尝试过制作某种类型的“面包屑”来遵循对象的结构，但后来我意识到在进行更改时它不会持续存在。

有什么想法吗？如果没有一些硬编码的唯一 ID，这甚至可能吗？

Answer 1

编辑 1： 第 4 点不是最佳的，可以做得更好 - 完成将主对象渲染到 DOM 后，循环遍历状态对象并为每个路径找到DOM 节点并展开它。

编辑 2： 你可以用 'index1.nestedIndex2.1.nestedIndex3' 代替 'index1.nestedIndex2[1].nestedIndex3'，让你的代码更简单

编辑 3： 无需使用 lodash（编辑点 1）

我希望我正确理解了您的情况。

为了保持展开（或折叠）状态，您必须：

1. 创建一个对象来存储您想要扩展的索引的路径，例如{'index1.nestedIndex2[1].nestedIndex3': true}。您可以在单击展开时执行此操作。当然，这意味着您应该在单击时知道当前索引及其父级 - 一种方法是在每个元素上使用一个 DOM 属性来保存索引。因此，当您单击一个节点以递归方式向上直到到达顶部元素并构建该字符串路径时
2. 使用JSON.stringify 将状态对象转换为字符串并将其存储在localStorage (https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 中。 localStorage.set('expandedState', JSON.stringify(stateObject))。如果您需要存储多个数据对象的状态，则必须使用一些特定的键而不是 'expandedState'
3. 在代码中，在渲染主对象之前，将字符串状态从 localStorage 转换回使用 JSON.parse 的对象
4. 在渲染主对象时，您必须为当前渲染的节点构建路径并检查是否可以在状态对象中找到它。如果是，请通过在其上添加您的 css 类来扩展它。要重新构建路径，最好在渲染每个节点时构建它，而不是使用第 1 点中使用的相同方法，但这也可以工作（但速度较慢，所以我认为对于非常大的对象将是一个问题）