是否可以以某种方式将JSON对象直接存储到DOM中？

Question

如果有一个JSON.parse的输出随手可得，是否有一些合法的方法将该对象作为单个实体存储在DOM中？

即

jsonObject = JSON.parse（something）;

我想考虑将jsonObject作为某个元素的（child || textNode || ???）存储在DOM中，然后检索它，以便在检索后立即通过以下方式访问其内容： / p>

jsonObject.keyName

我想避免添加几十个数据集属性，然后被迫一次提取一个。如果你有几十个关键的：值对，这太过分了，看起来效率太低了。

Answer 1

数据属性必须是字符串，不能直接在其中存储对象。因此，不要解析JSON字符串，只需将JSON字符串直接存储在数据集属性中。

如果你使用jQuery，它的.data()方法会接受一个对象，并会根据需要自动对其进行字符串化。

如果要将对象与所有对象关联的元素具有ID，则另一个选项是将全局对象用作表格，键入元素的ID。

jsonTable[id] = jsonObject;

Answer 2

这取决于您网页的生命周期。如果您不打算重新加载页面，最好将其保留为页面上的JavaScript变量。

您还可以考虑将原始JSON存储在隐藏字段或其他隐藏DOM元素中。请记住，如果您执行页面发布，隐藏字段将发布到服务器

Answer 3

TGH有正确的答案。把它留作变量。

另一种方法是使用history.pushState（）将其与URL一起存储到您的页面。如果您希望用户能够单击后退按钮并将json恢复为该页面的值，这将非常有用。

Answer 4

如果要存储与DOM元素关联的数据（JSON）。

您可以使用jQuery data function。

例如，将JSON存储到餐馆行（div）

$("div.restaurant-row").data("info",{purchases: "blablabla", mealFormulas: "xxxxx"});

，例如，获取DOM关联数据

$("div.restaurant-row").data("info").purchases;    //blablabla

我不确定这是不是你想要的。

希望这对你有所帮助。