CODEWITHSUNDEEP
javascripthtmllocal-storagesession-storagechap-links-library
Bob Tahmaseb
Bob Tahmaseb

Reputation: 73

Saving user edited Timeline?

I've been playing around with http://almende.github.com/chap-links-library/timeline.html which allows the user to add/edit/delete events on the timeline. Closing or refreshing the browser resets it to the pre-loaded data source - JSON, table info or Google Spreadsheet. Nothing the user adds or changes is saved.

How do you make user changes persistent?

I've used HTML5 localStorage before for saving text, checkbox, and select box entries, etc. but with this Timeline the only entry is:

div id="mytimeline"

which has a script associated with it:

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

which is the reference to the JS that builds the timeline container.

Any ideas or examples or pointers?

Thanks.

Update: Here is what I have so far:

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

I've also made these changes - body onload="storedData()" to try to load localStorage saved values and changed div id="mytimeline" onmouseup="storeTimelineData()" to store the values when changes are made to the timeline.

Changes to the Timeline are being saved in localStorage and I can see these changes in the console for Key/Values. When I refresh the browser though, these are not being loaded into mytimeline. What did I miss?

Thanks.

Upvotes: 3

Views: 588

Answers (1)

charlietfl
charlietfl

Reputation: 171679

I've never seen plugin until your post but in the API docs are all sorts of methods. The most important one you would need to start would be getData().

Simplest storage scenario would be to set up a timed interval to get the data , convert it to JSON and store it. Alternative would be to update your stored data every time use interacts with events.

A basic storage update function would be along the lines of:

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

Then when page loads you would need to check if there is data in localStorage , convert it to a javascript object using :

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

And use this data to initialize the plugin if the data exists.

I have really just given you a basic overview. There are numerous details you will have to sort out from here

Upvotes: 2

Related Questions