实现HTML5的localStorage [英] Implement HTML5 localStorage

问题描述

我知道使用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:

1. 在没有任何子内容存储初始HTML code（mainContainer上）;和
2. 保存孩子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.

1. 在页面加载后（使用jQuery）检查基本HTML模板是有
2. 如果不使用jQuery来加载它，并将其存储在localStorage的
3. 使用一个jQuery选择器选择在当前页面的相应元素。这可能是该元素。而使用$（...）HTML（存储HTML模板）。显示基本HTML。
4. 如果您需要插入动态值使用像约翰Resig的 MicroTemplating 插入变量。

1. When the page loads (use jQuery) check if the base HTML template is there
2. If not use jQuery to load it and store it in localStorage
3. 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.
4. If you need to insert dynamic values use something like John Resig MicroTemplating to insert variables.

这篇关于实现HTML5的localStorage的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！