Реализация HTML5 localStorage - PullRequest
Новая
       15

Реализация HTML5 localStorage

1 голос
/ 29 ноября 2011

Мне известны основы использования HTML5 localStorage с использованием localStorage.getItem / setItem.

Но я пытаюсь понять, как реализовать то же самое на моей динамической странице. Итак, вот сценарий:

У меня есть динамическая страница (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-код (по щелчку, скажем, 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 для 2 вещей:

  1. Хранение исходного HTML-кода (mainContainer) без дочернего содержимого; И
  2. Хранение также дочернего HTML-кода (который находится в mainContainer)

Я смотрю на различные способы, которыми я могу сделать это. Я открыт для всех идей, которые вы можете придумать. Просто нужно учитывать, что все вещи динамические (количество родительских div / дочерних li и т. Д.) ... Поэтому нужно знать, как я могу обрабатывать этот динамический контент.

1 Ответ

0 голосов
/ 29 ноября 2011

Вы можете хранить все, что вам нравится, в localStorage, при условии, что сохраненный элемент превращается в строку, без проблем в вашем случае, и общий объем хранилища не превышает 5 МБ на сайт.

Вы можете использовать что-то вродеthis.

  1. Когда страница загружается (используйте jQuery), проверьте, существует ли базовый HTML-шаблон
  2. Если не используете jQuery, чтобы загрузить его и сохранить в localStorage
  3. используйте селектор jQuery, чтобы выбрать соответствующий элемент на текущей странице.Это может быть элементом.И используйте $ (...). Html (хранимый шаблон html);для отображения базового html.
  4. Если вам нужно вставить динамические значения, используйте что-то вроде John Resig MicroTemplating для вставки переменных.
...