为什么我的本地存储不起作用？

Question

每个用户都可以从表单动态创建表格。每次进行更改或人员退出页面时，我都会尝试将表及其当前状态保存到本地存储中。名称存储用户的名称，我将其用作键。但是，它对我不起作用。我想我在需要使用 saveData 函数时保存数据，并在需要时使用 showData 函数解析它。谁能告诉我哪里出错了？

    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

您正在尝试对 html 标记进行字符串化，但这是行不通的！你只能 JSON.stringify 一个 js 对象，这意味着一个类的实例，一个对象文字或一个数组：

// 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>');

只需去掉 JSON.stringify 部分的方法，这应该可以工作，因为 element.innerHTML 已经返回了一个字符串：

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

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