Сохранение измененной пользователем временной шкалы?

Я играл с http://almende.github.com/chap-links-library/timeline.html, который позволяет пользователю добавлять/редактировать/удалять события на временной шкале. Закрытие или обновление браузера сбрасывает его на предварительно загруженный источник данных — JSON, информацию о таблице или таблицу Google. Ничего, что пользователь добавляет или изменяет, не сохраняется.

Как сделать пользовательские изменения постоянными?

Раньше я использовал HTML5 localStorage для сохранения текста, флажков и записей в полях выбора и т. д., но с этой временной шкалой единственная запись:

div ID="моя временная шкала"

с которым связан скрипт:

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));

который является ссылкой на JS, который создает контейнер временной шкалы.

Любые идеи или примеры или указатели?

Спасибо.

Обновление: вот что у меня есть до сих пор:

//Check to see if localStorage is supported
var db = getLocalStorage() || alert("Local Storage Not supported in this browser.  Try updating to the latest Firefox, Chrome or Safari browsers.");

function getLocalStorage() {
    try {
        if(window.localStorage ) return window.localStorage;            
}
    catch (e)
{
    return undefined;
}
}  

//Store Timeline Data to localStorage
function storeTimelineData(){
    var data=timeline.getData();
    localStorage.setItem('mytimeline', JSON.stringify(data));
    var storedData=JSON.parse( localStorage.getItem('myTimeline') );

// clear storage
function clearLocal() {
clear: localStorage.clear();
return false;
}

Я также внес следующие изменения: body onload="storedData()" для попытки загрузки сохраненных значений localStorage и измененный div id="mytimeline" onmouseup="storeTimelineData()" для сохранения значений при внесении изменений в временную шкалу.

Изменения временной шкалы сохраняются в localStorage, и я вижу эти изменения в консоли для ключей/значений. Когда я обновляю браузер, они не загружаются в мою временную шкалу. Что я упустил?

Спасибо.


person Bob Tahmaseb    schedule 25.12.2012    source источник
comment
@laaposto: почему тег timeline.js удален?   -  person Anto Jurković    schedule 03.02.2014
comment
Я добавил библиотеку ссылок chap, которая является более точной и только что созданной. Когда вы впервые опубликовали этот вопрос, его не было на SO в качестве тега.   -  person laaposto    schedule 03.02.2014


Ответы (1)


Я никогда не видел плагин до вашего поста, но в документах API есть всевозможные методы. Самый важный из них, который вам нужно начать, это getData().

Простейшим сценарием хранения было бы установить временной интервал для получения данных, преобразовать их в JSON и сохранить. Альтернативой может быть обновление сохраненных данных каждый раз, когда использование взаимодействует с событиями.

Базовая функция обновления хранилища будет выглядеть следующим образом:

function storeTimelineData(){
      var data=timeline.getData();
      localStorage.setItem('myTimeline', JSON.stringify(data));
}

Затем, когда страница загружается, вам нужно будет проверить, есть ли данные в localStorage , преобразовать их в объект javascript, используя:

var storedData= JSON.parse( localStorage.getItem('myTimeline') );

И используйте эти данные для инициализации плагина, если данные существуют.

Я только что дал вам базовый обзор. Здесь есть множество деталей, с которыми вам придется разобраться.

person charlietfl    schedule 25.12.2012
comment
Спасибо, charlietfl... ты наставила меня на правильный путь, и я думаю, что в основном я там. Я обновил свой вопрос и до сих пор работал наполовину. - person Bob Tahmaseb; 26.12.2012
comment
удачи... у плагина приятный внешний вид, было бы неплохо, если бы документы были немного более удобными для пользователя, но есть множество доступных для использования методов - person charlietfl; 26.12.2012
comment
charlietfl - есть идеи, почему сохраненные значения не загружаются обратно на временную шкалу? Спасибо. - person Bob Tahmaseb; 26.12.2012
comment
Я изменил данные извлечения на функцию и использовал имя функции с телом onload= (см. редактирование выше). Все еще не загружается из локального хранилища. ... данные для инициализации плагина .... Пробовал getData, но без радости ... Есть какие-нибудь намеки на это? Спасибо. - person Bob Tahmaseb; 27.12.2012
comment
getTimelineData() ничего не возвращает, а var getData находится внутри функции, поэтому не имеет области действия где-либо еще из-за закрытия - person charlietfl; 27.12.2012
comment
Еще не разобрался. Тупик. Все еще сохраняет, но не сохраняет изменения. storageData убивает меня в том, как реализовать. Я разместил это jsfiddle.net/babakt/6xhDw/2. Интересно, ссылается ли getData вернуться к предварительно загруженным данным? Как вернуть сохраненные значения на временную шкалу? - person Bob Tahmaseb; 27.12.2012
comment
Я играл с getData на одной из демонстрационных страниц с помощью консоли браузера, прежде чем предоставить решение в ответ. Я добавил событие, оно было в результате getData. КОГДА я удалил событие, его больше не было в результатах - person charlietfl; 27.12.2012
comment
Извините... опечатка после нескольких разочаровывающих часов. Я вижу изменения в консоли разработчика (значение изменяется в локальном хранилище), когда добавляю и удаляю записи. Хранение данных работает хорошо. Чего я не могу понять, так это почему, когда я перезагружаю или снова открываю браузер, временная шкала возвращается в исходное состояние и не сохраняет добавленные/измененные события. Я думаю, что у меня что-то определенно не так с отправкой сохраненных данных и/или я должен сделать это как-то с помощью метода API... возможно, нарисовать или установить данные. Ходил кругами, пытаясь понять это - person Bob Tahmaseb; 27.12.2012