사용자 저장 편집 타임 라인?

Question

나는 사용자가 타임 라인에서 이벤트를 추가/편집/삭제할 수있는 http://almende.github.com/chap-links-library/timeline.html으로 놀았습니다. 브라우저를 닫거나 새로 고침하면 사전로드 된 데이터 소스 (JSON, 표 정보 또는 Google 스프레드 시트)로 재설정됩니다. 사용자가 추가하거나 변경 한 내용이 저장되지 않습니다.

사용자 변경 사항을 어떻게 영구 보존합니까?

내가 전에 등 텍스트, 체크 박스, 선택 상자 항목을 저장할하지만 유일한 항목은이 타임 라인에 HTML5 로컬 스토리지를 사용했습니다 다음을 가지고

사업부 아이디 = "mytimeline"

을 연결된 스크립트 :

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

타임 라인 컨테이너를 작성하는 JS에 대한 참조입니다.

아이디어 나 예 또는 참고 자료가 있습니까?

감사합니다. = 몸의 온로드는 = "storedData이()"로컬 스토리지 값을 저장 DIV id를 변경로드하려고하는 -

//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; 
} 

나는 이러한 변경 한 : 업데이트

: 여기 는 내가 지금까지 무엇을 가지고 "mytimeline"onmouseup = "storeTimelineData()": 타임 라인이 변경 될 때 값을 저장합니다.

타임 라인의 변경 내용이 localStorage에 저장되어 있으며 키/값에 대한 콘솔에서 이러한 변경 사항을 볼 수 있습니다. 브라우저를 새로 고치면 mytimeline에로드되지 않습니다. 내가 놓친 게 무엇입니까?

감사합니다.

Answer 1

귀하의 게시물이 있지만 API 문서에 모든 종류의 방법까지 플러그인을 본 적이. 가장 중요한 것은 getData()입니다.

가장 간단한 저장 시나리오는 데이터를 가져 와서 JSON으로 변환하고 저장하기 위해 시간 간격을 설정하는 것입니다. 대안은 사용이 이벤트와 상호 작용할 때마다 저장된 데이터를 업데이트하는 것입니다.

기본 저장 업데이트 기능의 라인을 따라 다음과 같습니다

다음

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

당신이, 로컬 스토리지에 데이터가 있는지 확인해야 사용하여 자바 스크립트 객체로 변환 할 페이지를로드 :

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

데이터가있는 경우이 데이터를 사용하여 플러그인을 초기화하십시오.

저는 여러분에게 기본적인 개요를 제공했습니다. 여기에서 정렬해야 할 세부 사항이 많이 있습니다