Javascript 实现HTML5本地存储

我知道使用

localStorage.getItem

/

setItem

使用HTML5 localStorage的基础知识

但我正试图理解如何在我的动态页面上实现同样的功能。下面是一个场景：

我有一个动态页面（myPage.jsp），它在初始加载时调用Java方法（输出HTML字符串），如下所示

<div id="mainContainer">
    <div id="parent1"><span>Parent 1</span></div><ul id="child1"></ul>
    <div id="parent2"><span>Parent 2</span></div><ul id="child2"></ul>
    <div id="parent3"><span>Parent 3</span></div><ul id="child3"></ul>
</div>

家长1

父母2

家长3

在这里，父div的数量是基于某种逻辑的动态变化的

现在，单击任何父div，将再次调用子innerHTML的Java方法（该方法将再次输出HTML字符串）。 返回的HTML（点击Parent 2）如下所示

<li class="listEle">Child content 1</li>
<li class="listEle">Child content 2</li>

子内容1 子内容2 在这里，“li”元素的数量对于每个父元素都是动态的。 实际上，上面的HTML只是附加到主容器中……因此整个HTML代码如下所示

<div id="mainContainer">
    <div id="parent1"><span>Parent 1</span></div><ul id="child1"></ul>
    <div id="parent2"><span>Parent 2</span></div><ul id="child2"><li class="childLi">Child content 1</li><li class="childLi">Child content 2</li></ul>
    <div id="parent3"><span>Parent 3</span></div><ul id="child3"></ul>
</div>

家长1

父2
子内容1
子内容2
家长3

现在我的问题是，我想将localStorage用于两件事：

存储没有任何子内容的初始HTML代码（mainContainer）；及

还存储子HTML代码（位于mainContainer中）

---

我正在研究各种方法，我可以做到这一点。我愿意接受你能想到的所有想法。只需要考虑所有事物都是动态的（父div /子李的数量等等）…所以需要知道如何处理这个动态内容。

你可以在本地存储中存储你喜欢的任何东西，只要存储的项目被转换成字符串，在你的情况下没有问题，并且每个站点的总存储量不超过5MB。 你可以这样做

加载页面时（使用jQuery）检查是否存在基本HTML模板

如果没有，请使用jQuery加载它并将其存储在localStorage中

使用jQuery选择器在当前页面中选择适当的元素。这可能是元素。并使用$（…）.html（存储的html模板）；显示基本html

如果需要插入动态值，请使用类似John Resig的方法插入变量

---

不要存储标记，存储数据。好吧……我肯定会这样做……但是，按照应用程序已经编写好的方式，即我的Java代码返回完整的HTML字符串（不仅仅是数据），我计划存储完整的HTML字符串……而且bcoz有很多数据（特别是子HTML），我想只存储数据会涉及大量的解析…但无论如何，那是另一半…Thx…实际上我知道，我的数据将低于5 MB的限制…我想了解我到底如何实现整个事情…我不想要确切的代码，但这只是我提到的场景的一种方法…Thx…实际上，如果你看一下我的原始问题，我在看将多个localStorage值（实际上是html字符串）附加到html中的多个/适当位置的方法…比如如何将正确的html字符串附加到正确的位置？