1

クリックで画像を追加できるテーブルがあります。テーブルはフォームから動的に作成されます。テーブルをローカルストレージに保存しようとしましたが、循環参照の問題が発生しています。この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 ) ) );
    }
}
4

1 に答える 1

3

すべてのDOM要素は、parentNodeおよびへの参照を保持しdocumentますが、これを文字列化することはできません。実際、各要素は、その子へのリンクを保持する親へのリンクを保持します。

JSON.stringifyDOM要素には適用できません。

本当にテーブルを保存したい場合は、を使用してHTMLを保存できますtable.innerHTML。他のソリューションを提案することもできます（循環要素またはDOMノードからJSONを生成できる特定のstringify実装もあります）。ただし、テーブルをに保存しようとする理由を知る必要がありますlocalStorage。

于 2013-01-19T16:12:50.963 に答える