javascript - 实现 HTML5 本地存储

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 的数量是基于某种逻辑的动态的。

现在，单击任何父 div 时，都会为子 innerHTML 再次调用 Java 方法(再次输出 HTML 字符串)。 返回的 HTML(点击 Parent 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)，不包含任何子内容；和
2. 同时存储子 HTML 代码(位于 mainContainer 内)

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

Answer 1

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

你的方法可以是这样的。

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