1

一般的な To-Do リストを作成していますが、何とかリストを「保存」しようとしています。現在の仕組みは次のとおりです。テーブルの各「列」は個別の配列に格納され、複数の配列をループして必要なすべてのデータを受け取ります。私はデータベースについてよく知っていますが、データベースを使用していません。単純に、方法がわからないからです。

簡単に言えば、このリストをどうにかして JSON 文字列に保存し (その方が扱いやすく、解析できると聞きました)、後で読み込めるようにコンピューターに保存するか、保存できるようにしたいと考えています。クッキーとして。最大サイズは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++
    };
4

1 に答える 1

0

コメントに記載されているように...重複を避けるために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);

デモ：http：//jsfiddle.net/rDh4w/

マップのAPIリファレンスhttp://api.jquery.com/map/

于 2013-01-04T03:51:28.863 に答える