0

各ユーザーは、フォームからテーブルを動的に作成できます。変更が加えられるか、ユーザーがページを終了するたびに、テーブルとその現在の状態をローカル ストレージに保存しようとしています。Name にはユーザーの名前が格納されており、それをキーとして使用しています。しかし、それは私にとってはうまくいきません。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 ));
}
4

1 に答える 1

1

動作していない html マークアップを文字列化しようとしています! クラス、オブジェクトリテラル、または配列のインスタンスを意味する js オブジェクトを JSON.stringify することしかできません。

// 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); 
}
于 2013-01-20T14:55:05.720 に答える