由网友(难免孤独)分享简介：我知道使用HTML5的localStorage使用的基本的 localStorage.getItem / setItem 。I am aware of the basics of using the HTML5 localStorage using the localStorage.getItem/setItem...

我知道使用HTML5的localStorage使用的基本的 localStorage.getItem / setItem 。

I am aware of the basics of using the HTML5 localStorage using the localStorage.getItem/setItem.

不过，我想了解如何实现我的动态页面是一样的。因此，这里的情景：

But I am trying to understand how to implement the same on my dynamic page. So here is the scenario:

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

I have a dynamic page (myPage.jsp) which on initial load calls a Java method (that outputs the HTML string) as below;

<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。

Here the number of parent div's are dyanamic based on some logic.

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

Now on click on any of the parent divs, a Java method is called again (that again outputs the HTML string) for the child innerHTML. The HTML returned (on click of say Parent 2) is as follows;

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

下面的礼元素的数量是动态的，每个父母。 其实上面的HTML只是追加到mainContainer上....所以整体的HTML code看起来像

Here the number of "li" elements are dynamic for each parent. Actually the above HTML is just appended to the mainContainer....So the overall HTML code looks like

<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件事情：

Now my question is I want to use localStorage for 2 things:

在没有任何子内容存储初始HTML code（mainContainer上）;和 保存孩子HTML code，以及（这是mainContainer上内）

我在看，我可以做到这一点的各种方法。我愿意，你能想到的所有的想法。只需要考虑到所有的东西都是动态的（父的div /子李时珍等数）......所以，要知道我怎么可以处理动态内容。

I am looking at the various ways in which I can do this. I am open to all ideas that you can think of. Just need to consider that all things are dynamic (number of parent divs/child li's, etc)...So need to know how I can handle that dynamic content.

推荐答案

您可以存储任何你喜欢的localStorage存储提供变成一个字符串的项目，你的情况没有什么问题，总存储不超过5MB每个站点。

You can store anything you like in localStorage provided the item stored is turned into a string, no problem in your case, and the total storage doesn't exceed 5Mb per site.

您的方法可以是这样的。

You approach could something like this.

在页面加载后（使用jQuery）检查基本HTML模板是有 如果不使用jQuery来加载它，并将其存储在localStorage的 使用一个jQuery选择器选择在当前页面的相应元素。这可能是该元素。而使用$（...）HTML（存储HTML模板）。显示基本HTML。 如果您需要插入动态值使用像约翰Resig的 MicroTemplating 插入变量。 When the page loads (use jQuery) check if the base HTML template is there If not use jQuery to load it and store it in localStorage use a jQuery selector to select the appropriate element in the current page. This could be the element. And use $(...).html(stored html template); to display the base html. If you need to insert dynamic values use something like John Resig MicroTemplating to insert variables.