вы говорите, что хотите сохранить данные в localStorage, но также хотите отправить измененные данные на сервер.
Я бы посоветовал вам разделить эту проблему на (Часть 1), изучающую, как сохранить локально в localStorage и отображающую этот контент с помощью шаблонов, а затем (Часть 2), научившуюся хранить на сервере. Я могу помочь вам с частью 1, так как, честно говоря, я все еще изучаю часть 2.
Хорошо, две подзадачи:
- использование localStorage для сохранения данных
- использование шаблонов jQuery для визуализации данных
Использование localStorage
Вы не указали, откуда поступают ваши данные, поэтому я предполагаю, что у вас есть JSON. Для простоты я просто буду использовать эти данные:
(Вам может быть интересно, почему я добавил контент, который не является простым ASCII - это просто моя привычка, я верю в тестирование с реалистичным текстом с самого начала. Когда мы наконец представим эти данные, они должны выглядеть прямо в браузере.)
var philosophers = [
{
"phone": "1-800-123-1937",
"name": "H\u00e9l\u00e8ne Cixous",
"email": "helene@stanford.edu"
},
{
"phone": "1-800-000-0000",
"name": "\u041c\u0438\u0445\u0430\u0438\u0301\u043b \u0411\u0430\u043a\u0443\u0301\u043d\u0438\u043d",
"email": "mikhail@ispitondns.com"
},
{
"phone": "1-800-770-0830",
"name": "Jayar\u0101\u015bi Bha\u1e6d\u1e6da",
"email": "jay@ancientindia.edu"
}
]
Таким образом, нам нужно поместить это в localStorage, просто чтобы начать с некоторых данных.
Хитрость localStorage в том, что вы не можете просто напрямую хранить объекты JSON. Вы можете хранить только строки. Есть некоторые библиотеки , предназначенные для улучшения этой ситуации, но мы просто сами преобразуем наши объекты. Для этого мы будем использовать JSON:
localStorage.philosophers = JSON.stringify(philosophers)
Неудивительно, что JSON.stringify превращает объекты JSON в строку, и это можно установить непосредственно как «атрибут» localStorage.
(Если вы используете старый браузер, то у вас может не быть нативного объекта JSON - для этого тоже есть библиотека .)
Хорошо, теперь у нас есть некоторые контактные данные, хранящиеся в localStorage с меткой philosophers. (Эй, ты никогда не знаешь, когда тебе может понадобиться вызвать философа!)
Чтобы вернуть эти данные обратно в объект Javascript, с которым мы можем что-то сделать, мы используем другой метод JSON, JSON.parse.
philosophers = JSON.parse(localStorage.philosophers)
Это все довольно искусственно, так как мы сначала получаем данные philosophers, затем мы их переводим в строку, а затем сохраняем, а затем возвращаем обратно, а затем анализируем, а потом мы вернулись туда, откуда начали. Но на самом деле такие данные будут поступать из какого-то другого источника - возможно, из внешнего файла или веб-службы или чего-либо другого.
Использование шаблонов для визуализации объектов
Поскольку вы использовали в своем шаблоне то, что выглядит как синтаксис шаблона jQuery, я предполагаю, что это библиотека, которую вы используете. Документы jQuery показывают нам, как мы можем визуализировать переменную, содержащую некоторые объекты (например, то, что мы имеем в нашей переменной philosophers) с шаблоном, вот ключевой бит этих документов:
// Convert the markup string into a named template
$.template( "summaryTemplate", "<li>${Name}</li>" );
function renderList() {
// Render the movies data using the named template: "summaryTemplate"
$.tmpl( "summaryTemplate", movies ).appendTo( "#moviesList" );
}
Вот один из способов заставить ваш шаблон работать (есть и другие, возможно, более чистые методы, но шаблоны jQuery сами по себе являются темой):
var myTemplate = "<li>Name: ${name}<br/>Phone: ${phone}<br/>Email: ${email}</li>";
$.template("contactLi", myTemplate);
Это создает шаблон и сохраняет его в переменной с именем contentLi. (Обратите внимание, что $.template хочет, чтобы данное имя переменной было задано в виде строки, что кажется мне странным. Я нахожу способ, которым шаблоны jQuery называют и определяет эти методы, сбивает с толку, что является одной из причин, по которым я предпочитаю Усы для шаблонизации. Пожав плечами.)
Также обратите внимание, что у нас нет ul, включенного в шаблон, потому что это не будет повторяться для каждого отображаемого объекта. Скорее, мы собираемся добавить ul в качестве хука в разметке и неоднократно визуализировать собранный шаблон как дочерний элемент этого. Который просто занимает одну строку с шаблонами jQuery, довольно приятно:
$.tmpl( "contactLi", philosophers ).appendTo( "#guests" );
Итак, пошли, выдали список.
Я знаю, что это не отвечает на весь ваш вопрос, но здесь есть много чего начать.
Вот пример , который вы можете попробовать , в итоге он рендерит что-то вроде:
Name: Hélène Cixous
Phone: 1-800-123-1937
Email: helene@stanford.edu
Name: Михаи́л Баку́нин
Phone: 1-800-000-0000
Email: mikhail@ispitondns.com
Name: Jayarāśi Bhaṭṭa
Phone: 1-800-770-0830
Email: jay@ancientindia.edu
(Хе-хе, парень, подсветка синтаксиса SO не очень хорошо обрабатывает текст Unicode!)