行をデータテーブルにコピーしてlocalStorageに保存するにはどうすればいいですか？

Question

私はプロジェクトを完成させる最終ステップに入っています。

これは私のこのプロジェクトについて議論する最後の質問です。 しかし、私はいくつかの障害があります。

1. 私はtable2にtable1から行をコピーしてのlocalStorageにtable2で結果の行を保存したいが。

2. メインテーブル[table1]の行をtable2にコピーして、入力フォームメソッド（JSFiddle 1）のようにlocalStorageに保存することはできません。

、のlocalStorageに保存することができます私はすでに正常のlocalStorageに入力フォーム とストアから保存行の表を作成し、私はこののように働いてコピー行が行機能を作成します。

var dataSet; 
try { 
    dataSet = JSON.parse(localStorage.getItem('dataSet')) || []; 
} catch (err) { 
    dataSet = []; 
} 
$('#myTable').dataTable({ 
    "data": [], 
    "columns": [{ 
    "title": "First Name" 
    }, { 
    "title": "Last Name" 
    }, { 
    "title": "Action" 
    }], 
    "bStateSave": true, 
    "stateSave": true, 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": false, 
    "bInfo": false, 
    "bAutoWidth": false 
}); 
oTable = $('#myTable').DataTable(); 
for (var i = 0; i < dataSet.length; i++) { 
    oTable.row.add(dataSet[i]).draw(); 
} 

$('#Save').click(function() { 
    var data = [ 
     $('#first').val(), 
     $('#last').val(), 
     "<button class='delete'>Delete</button>" 
    ]; 
    oTable.row.add(data).draw(); 
    dataSet.push(data); 
    localStorage.setItem('dataSet', JSON.stringify(dataSet)); 

}); 

​​：行を作成してのlocalStorageに

JSFiddle 2を保存：のlocalStorageへコピー行と保存行[私はここで働いている]

誰でもできますすることができます私？

私が怠け者だと思ったら。私はあまりにも機能を作ることができず、これがプログラミングにおける私の新しいことなので、それを感謝します。しかし、私はいつも参考文献を探し、それを固めるためにここに来る必要があります。

この質問に間違いがあれば修正してください。

Answer 1

実際の例のようにすることができます。 copyRows関数では、コピーされた行をdataSet配列にプッシュし、配列をlocalStorageに保存します。 table2のデータをdataSetに設定します。最初にlocalStorageからdataSetを保存してお読みください。

更新： テーブルごとに異なるlocalStorageアイテムを使用する必要があります。ここではdataSet_tableid形式を使用してデータをlocalStorageに保存します。

ここに変更されたJSがあります。 exmaple 1では

var mainTable = $('#table1').dataTable({ 
    "bStateSave": true, 
    "stateSave": true, 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": false, 
    "bInfo": false, 
    "bAutoWidth": false 
}); 

/*SELECT OPTION */ 
mainTable.on('click', 'tbody tr', function() { 
    $(this).toggleClass('selected'); 
}); 

$('#copyToTable2,#copyToTable3').on('click', function() { 
    let $elem = $(this); 
    var table = $("#table" + $elem.attr('id').replace(/[a-zA-Z]/ig, '')); 
    var tbl_id = table.attr('id'); 

    var $row = mainTable.find(".selected"); 
    if (!$row.length) { 
     console.log('You must select some rows to copy first'); 
     return; 
    } else { 
     var r = confirm("Copy to table " + tbl_id + "?"); 
     var table_to_copy = table.dataTable(); 
     if (r == true) { 
      copyRows(mainTable, table_to_copy); 
      console.log("Copied!"); 
      setTimeout('console.clear()', 2000); 
     } 
    } 
}); 

/* FROM HERE SAVE ROW ================*/ 

function copyRows(fromTable, toTable) { 
    var $row = fromTable.find(".selected"), 
     storageName = 'dataSet_' + toTable.attr('id'), //added this line 
     dataSet = localStorage.getItem(storageName) ? JSON.parse(localStorage.getItem(storageName)) : []; //added this line 

    $.each($row, function (k, v) { 
     if (this !== null) { 
      addRow = fromTable.fnGetData(this); 
      toTable.fnAddData(addRow); 
      dataSet.push(addRow); //added this line 
     } 
    }); 

    localStorage.setItem(storageName, JSON.stringify(dataSet)); //added this line 
} 

/* =============== TABLE 2 ================== */ 

$('#table2').dataTable({ 
    "data": localStorage.getItem('dataSet_table2') ? JSON.parse(localStorage.getItem('dataSet_table2')) : [], //changed here 
    "columns": [{ 
     "title": "First Name" 
    }, { 
     "title": "Last Name" 
    }, { 
     "title": "Action" 
    }], 
    "bStateSave": true, 
    "stateSave": true, 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": false, 
    "bInfo": false, 
    "bAutoWidth": false 
}); 

$('#table3').dataTable({ 
    "data": localStorage.getItem('dataSet_table3') ? JSON.parse(localStorage.getItem('dataSet_table3')) : [], //changed here 
    "columns": [{ 
     "title": "First Name" 
    }, { 
     "title": "Last Name" 
    }, { 
     "title": "Action" 
    }], 
    "bStateSave": true, 
    "stateSave": true, 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": false, 
    "bInfo": false, 
    "bAutoWidth": false 
}); 

UPDATED FIDDLE