Save Text Value To Listview & Start Count The Time

I have TWO main questions that I really would have help with. I have googled and searched for some day now without any help, but if you know any links that I maybe haven't watched

Solution 1:

Here is a DEMO

There are many questions within your problem, so I will probably not manage to answer all of them. To use localStorage with an array of 'tasks' you use JSON.stringify when saving and JSON.parse when retrieving.

So, each time page3 is displayed, you retrieve the current list of items from localStorage, create list items, empty the list and then append the created items :

$(document).on('pagebeforeshow', '#page3', function(){ 
    //setup the current list    if(localStorage.getItem('TaskList')){
        varTheList = [];
        TheList = JSON.parse(localStorage.getItem('TaskList'));
        var items = '';
        for (var i = 0; i < TheList.length; i++) {
            items += '<li><h3>' + TheList[i].text + '</h3><p>' + TheList[i].time + '<p></li>';
        }

        $('#orderedList').empty().append($(items)).listview('refresh');    
    }    
});

When entering a new item, you want to store the text and the current time, so use an object. First get the current list from localStorage, then create the new item and add it to the list, finally save back to localStorage clear the textarea and navigate to page3. The cancel button just clears the textarea:

$(document).on('pageinit', '#page2', function(){ 

    $('#btnCancel').on("click", function(){
        $('#newItemText').val(''); //CLEAR TEXT AREA
    });

    $('#btnSave').on("click", function(){            
        varTheList = [];
        if(localStorage.getItem('TaskList')){
            TheList = JSON.parse(localStorage.getItem('TaskList'));
        }
        var newitem = $('#newItemText').val(); 
        var task = {text: newitem, time: newDate() };
        TheList.push(task);
        localStorage.setItem('TaskList', JSON.stringify(TheList));

        $('#newItemText').val(''); //CLEAR TEXT AREA
        $.mobile.navigate( "#page3", { transition : "slide" });    
    });    
});