为什么我的本地存储无法正常工作？

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部分，应该工作，因为元素.innerHTML已经返回一个字符串：

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

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