从 jQuery 创建 JSON 字符串

Question

我正在创建一个通用的待办事项列表，并且我正在尝试以某种方式“保存”该列表。现在它的工作原理是：表的每个“列”都存储在其单独的数组中，我循环遍历多个数组以接收所有必要的数据。我对数据库了解很多，但我没有使用数据库，因为很简单，我不知道如何使用！

简而言之，我希望能够以某种方式将此列表存储到 JSON 字符串中（我听说它更易于使用，而且我可以解析它），然后将其保存到我的计算机中以便稍后加载，或将其保存为 cookie。我不确定你是否可以这样做，因为最大大小为 4KB。

任何建议都会很棒！

请找到我的代码。我已经排除了很多 CSS

HTML

<div id="form"><label>Task Number: </label><input value="1" readonly="readonly" id="taskNum" type="text"></div>
 <div id="form"><label>Description: </label><input id="taskDesc" type="text"></div>
<div id="form"><label>Task Name: </label><input id="taskName" type="text"></div>
<div id="form"><label>Date: </label><input id="taskDate" type="text"></div>
<div id="form"><label>Time: </label><input id="taskTime" type="text"></div>
<div id="form"><label>Notes: </label><input id="taskNotes" type="text"></div>
<input id="addTask" value="Add Task" onclick="startTask();" type="button">

JavaScript

var numA = [];
var descA = [];
var nameA = [];
var dateA = [];
var timeA = [];
var notesA = [];


var num = $('#taskNum');
var desc = $('#taskDesc');
var name = $('#taskName');
var date = $('#taskDate');
var time = $('#taskTime');
var notes = $('#taskNotes');

function startTask()
{

    i=numA.length
    alert(i + ' before adding to array');

    numA[i] = num.val();
    descA[i] = desc.val();
    nameA[i] = name.val();
    dateA[i] = date.val();
    timeA[i] = time.val();
    notesA[i] = notes.val();

    displayTable();
}

function displayTable(){

    var c = -0;
    var newTable = '';

    while ( c<= i)
    {
        var st = '<tr><td>';
        var mid = '</td><td>';
        var del = '<label onclick="deleteRecord('+c+')" style="Color:blue; text-decoration:underline;">Delete Record?</label>';
        var end = '</td></tr>';

        alert('numA value: ' + c + ' value = '+ numA[c] +
         '\n descA value: ' + c + ' value = '+ descA[c] +
         '\n nameA value: ' + c + ' value = '+ nameA[c] +
         '\n dateA value: ' + c + ' value = '+ dateA[c] +
         '\n timeA value: ' + c + ' value = '+ timeA[c] +
         '\n notesA value: ' + c + ' value = '+ notesA[c]);
        newTable = newTable + st + numA[c] + mid + descA[c] + mid + nameA[c] + mid + dateA[c] + mid + timeA[c]+mid+del+end;
        alert(newTable);
        $('#toDoTable').html(newTable);
        c++
    };

Answer 1

如 cmets 中所述...将 ID 更改为 class 以避免重复。

建议将每个 task 包装在一个外包装中：

<div class="task_wrap">
    <div class="form"><label>Task Number: </label><input value="1" readonly="readonly" class="taskNum" type="text"></div>
    <div class="form"><label>Description: </label><input class="taskDesc" type="text"></div>
    <!-- other inputs for task-->
</div>

映射到数组：

var tasklistArray=$('.task_wrap').map( function(){
       var task={};
       $(this).find(':input').each(function(){
             task[ this.className]=$(this).val();
       });
        return task;
 }).get();

更改为 JSON：

var tasklistJSON= JSON.stringify( tasklistArray);

如果只在现代浏览器中使用它可以将它存储在localStorage：

localStorage.setItem("taskList", tasklistJSON);

演示：http://jsfiddle.net/rDh4w/

地图http://api.jquery.com/map/的API参考