使用localstorage保留javascript对象的本地备份

Question

我的js中有一个代表图形的对象：{"nodes": [...], "edges": [...]}。我想在浏览器中为其保留备份（因此该图在各个会话中均保持不变）。据我了解，这意味着我必须使用localStorage，并且我已经想到了几种方法：

1. 我通过将图形对象字符串化为json并将其存储在单个键下来保存它。
2. 我将对象分解为不同的部分（node_0，node_1，edge_0 ...），并将其作为不同的键存储在localStorage中。 （我可能还需要一个node_count字段和edge_count字段来跟踪）

在所有这些方法中，图形对象都是在网站加载时使用存储在localStorage中的数据初始化的，此后，在修改图形对象（添加/删除节点/边）时，这两个对象需要保持同步。

使用方法[1]，可以通过在每次修改图形对象时对整个图形对象进行字符串化，或者使用定时事件来保持数据同步，该定时事件定期进行同步。

使用方法[2]，我可以通过在localStorage中添加或删除项目来进行模块化修改，而不必对未更改的数据进行字符串化处理。可以通过允许序列中的孔来实现（这样，键node_0和node_2可能存在，但node_1不存在），这将使节点删除速度加快，但可能会使节点的初始加载变快。网站加载速度变慢时的数据。

在什么情况下哪种方法最好？有一个更好的方法吗？我可以使用哪些工具最轻松地实现它？我希望[2]至少对更大的图更好，尽管从我在互联网上看到的示例来看，localStorage似乎并没有以这种方式使用。