2013-01-19 28 views
1

我有一張桌子,我可以添加圖像onclick。該表是從表單動態創建的。我試圖將表保存到本地存儲,但我收到了循環引用問題。我已閱讀Example of a circular reference in Javascript?,但我是一個完全新手,並努力去理解。你能指出一下嗎?此代碼中的循環引用在哪裏?

function makeChart() { 
     var table = document.createElement('table'), 
     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 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; 
        sel = null; 
       } 
      }; 

      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; 
      }; 
     } 
     for (r = 0; r < howOften; r++) { 
      row = table.insertRow(-1); 
      for (c = 0; c < numDays; c++) { 
       col = row.insertCell(-1); 
       addImage(col); 
      } 
     } 
     document.getElementById('holdTable').appendChild(table); 
     document.getElementById('createChart').onclick = null; 
     console.log(table); 
     localStorage.setItem(name, JSON.stringify(table)); 
     console.log(JSON.parse(localStorage.getItem(table))); 
    } 
} 
+0

所有DOM元素都包含循環引用(例如通過'parentNode.childNodes ...'。將它們序列化爲HTML,而不是嘗試JSON字符串化。 – Bergi

回答

3

任何DOM元素保存到parentNode和所述document,你不能字符串化的參考。實際上,每個元素都有一個鏈接,指向它的父母,鏈接到它的孩子。

您不能將JSON.stringify應用於DOM元素。

如果你真的想保存你的表格,你可以使用table.innerHTML保存它的HTML。我們可以提出其他解決方案(甚至可以從圓形元素或DOM節點生成JSON的特定字符串化實現)。但是我們需要知道爲什麼您試圖保存localStorage中的表格。

+0

好吧,如果我正確理解它,它會嘗試將整個備份過程串聯起來DOM,所以我應該像這樣localStorage.setItem(名稱,JSON.stringify(table.innerHTML))目標表;我只是注意到我應該有名稱作爲鍵而不是最後一個日誌中的表 – Inkers

+0

你**可以* *做到這一點,但爲什麼?序列化頁面的一部分不是標準做法 –

+0

這是有效的。該表對於不同的用戶是唯一的,所以我希望用戶在進入頁面時看到他們特定的表格。確定我明白你的意思,我應該保存整個頁面? – Inkers