此代码中的循环引用在哪里？

Question

我有一个表格，我可以在其中添加图片 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 ) ) );
    }
}

Answer 1

任何 DOM 元素都包含对 parentNode 和 document 的引用，您无法对其进行字符串化。事实上，每个元素都拥有一个指向它的父元素的链接，该父元素拥有指向其子元素的链接。

您不能将JSON.stringify 应用于 DOM 元素。

如果您真的想保存表格，可以使用table.innerHTML 保存其 HTML。我们可以提出其他解决方案（甚至有特定的 stringify 实现能够从循环元素或 DOM 节点生成 JSON）。但我们需要知道为什么您尝试将表格保存在 localStorage 中。