实现 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 之类的工具来插入变量。