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

如评论中所述......将ID更改为类以避免重复。

建议在外包装中包装每个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);

DEMO：http://jsfiddle.net/rDh4w/

地图http://api.jquery.com/map/

的API参考

从jQuery创建JSON字符串

1 个答案: