实现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，再次调用Java方法（即再次输出HTML字符串）的子元素innerHTML。 返回的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的2两件事：

1. 存放初始HTML代码（mainContainer），没有任何子内容;和
2. 存放孩子的HTML代码，以及（这是mainContainer上内）

我看着，我能做到这一点的各种方法。我愿意接受你能想到的所有想法。只需要考虑所有的事情都是动态的（父div /子li的数量等）...所以需要知道我如何处理这些动态内容。

Answer 1

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

你的方法可能是这样的。

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