实现HTML5 localStorage

Question

我了解使用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>

这里父div的数量是基于某种逻辑的dyanamic。

现在点击任何父div，再次为子innerHTML调用Java方法（再次输出HTML字符串）。 返回的HTML（点击说父2）如下;

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

这里“li”元素的数量对于每个父元素是动态的。 实际上上面的HTML只是附加到mainContainer ....所以整个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>

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

1. 存储没有任何子内容的初始HTML代码（mainContainer）; AND
2. 同时存储子HTML代码（位于mainContainer中）

我正在研究能够做到这一点的各种方式。我对你能想到的所有想法持开放态度。只需要考虑所有事情都是动态的（父div /子li的数量等）......所以需要知道如何处理这些动态内容。

Answer 1

如果存储的项目变为字符串，您可以在localStorage中存储任何您喜欢的内容，在您的情况下没有问题，并且每个站点的总存储空间不超过5Mb。

你接近这样的事情。

1. 当页面加载（使用jQuery）时，检查基本HTML模板是否存在
2. 如果不使用jQuery加载它并将其存储在localStorage
中
3. 使用jQuery选择器选择当前页面中的相应元素。这可能是元素。并使用$（...）。html（存储的html模板）;显示基础html。
4. 如果需要插入动态值，请使用John Resig MicroTemplating之类的内容来插入变量。