Question

Each user can dynamically create a table from a form. I am trying to save the table and its current state to local storage every time a change is made or the person exits the page. Name stores the name of the user and I am using it as a key. However, it is not working for me. I think I am saving the data when I need to using the saveData function and parsing it when I need to with the showData function. Can anyone tell me where I am going wrong please?

    userDiv.onclick=(function() {
            alert($(this).attr("id"));
            name= $(this).attr("id");
            window.location.href = "Createtask.html";
            showData();//TRYING TO SHOW THE USER'S TABLE WHEN PAGE OPENS
            }


    function makeChart() {
     table = document.createElement('table');
    var taskName = document.getElementById('taskname').value,
        header = document.createElement('th'),
        numDays = document.getElementById('days').value, //columns
        howOften = document.getElementById('times').value, //rows
        row,
        r,
        col,
        c;
    var counter = 0;
    var target = numDays * howOften;

    var cel = null;
    var myImages = new Array();
    myImages[0] = "http://www.olsug.org/wiki/images/9/95/Tux-small.png";
    myImages[1] = "http://a2.twimg.com/profile_images/1139237954/just-logo_normal.png";
    var my_div = document.createElement("div");
    my_div.id = "showPics";
    document.body.appendChild(my_div);
    var newList = document.createElement("ul");
    my_div.appendChild(newList);

    if (taskName == '' || numDays == '') {
        alert('Please enter task name and number of days');
    }
    if (howOften == '') {
        howOften = 1;
    }
    if (taskName != '' && numDays != '') {

        for (var i = 0; i < myImages.length; i++) {
            var allImages = new Image();
            allImages.src = myImages[i];
            allImages.onclick = function (e) {
                if (sel !== null) {
                    sel.src = e.target.src;
                    my_div.style.display = 'none';
                    sel.onclick = null;
                    counter++;
                    sel = null;
                    if (counter == target) {
                      alert("Show some fireworks "+name+" gets a reward");
                    }
                }
            };

            var li = document.createElement('ul');
            li.appendChild(allImages);
            newList.appendChild(li);
        }
        my_div.style.display = 'none';

        header.innerHTML = taskName;
        table.appendChild(header);

        function addImage(col) {
            var img = new Image();
            img.src = "http://cdn.sstatic.net/stackoverflow/img/tag-adobe.png";
            col.appendChild(img);
            img.onclick = function () {
                my_div.style.display = 'block';
                sel = img;
                saveData();
            };
        }
        for (r = 0; r < howOften; r++) {
            row = table.insertRow(-1);
            for (c = 0; c < numDays; c++) {
                col = row.insertCell(-1);
                addImage(col);
            }
        }
        document.getElementById('theRealHoldTable').appendChild(table);
        document.getElementById('createChart').onclick = null;
        saveData();/CALLING THE LOCAL STORAGE WHEN TABLE IS CREATED
    }
}

function saveData(){
     localStorage.setItem(name, JSON.stringify(table.innerHTML));
}

function showData(){
    JSON.parse(localStorage.getItem( name ));
}

Answer 1

you are trying to stringify html-markup, which is not working! you are only able to JSON.stringify an js-object which means an instance of a class, an object literal or an array:

// this works because it is an instance
var objInstance = new SomeClass();
JSON.stringfy(objInstance);

// this works as it is an object-literal
var objLiteral = { mykey: 'myvalue' };
JSON.stringfy(objLiteral);

// this works as it is an array
var arr = [1, 2, 3]
JSON.stringfy(arr);


// THIS DOES NOT WORK!!!
JSON.stringify('<div>...</div>');

just strip the JSON.stringify part of your methods, that should work because element.innerHTML already returns a string:

function saveData(){
  localStorage.setItem(name, table.innerHTML);
}

function showData(){
  localStorage.getItem(name); 
}