时间戳

首页 > 解决方案 > 如何保存对象的打开/关闭状态

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

问题描述

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

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

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

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

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

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

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

标签： javascriptarraysobjectdata-structures

解决方案

编辑 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 点中使用的相同方法，但这也可以工作（但速度较慢，所以对于真正的大对象将是一个问题，我认为）

推荐阅读