1

I created an html table that automatically adds a new row from an input form. When I test it out, the new row is added but after I refresh the page, it's gone. How can I save the new row in local storage so I can keep the new data.

<script>
    var table = document.getElementById("orders");
    var row = table.insertRow(-1);

    var Order_ID = row.insertCell(0);
    var Order_Date = row.insertCell(1);
    var Customer_Name = row.insertCell(2);
    var Order_Balance_without_tax = row.insertCell(3);
    var Downpayment_Balance = row.insertCell(4);
    var Order_Delivered = row.insertCell(5);
    var Delivery_Date = row.insertCell(6);
    var Final_Order_Balance_with_tax = row.insertCell(7);
    var Revenue_Check = row.insertCell(8);
    var Payment_Received = row.insertCell(9);
    var Receival_Date = row.insertCell(10);
    var Check = row.insertCell(11);
    var Bank_Deposit = row.insertCell(12);
    var Deposit_Date = row.insertCell(13);
    var Verification = row.insertCell(14);
    var Verification_Date = row.insertCell(15);

    Order_ID.innerHTML = '{{ID}}';
    Order_Date.innerHTML = '{{OrderDate}}';
    Customer_Name.innerHTML = '{{CustomerName}}';
    Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
    Downpayment_Balance.innerHTML = '{{Downpayment}}';
    Order_Delivered.innerHTML = '{{Delivery}}';
    Delivery_Date.innerHTML = '{{DeliveryDate}}';
    Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
    Revenue_Check.innerHTML = '{{RCheck}}';
    Payment_Received.innerHTML = '{{PReceival}}';
    Receival_Date.innerHTML = '{{PaymentDate}}';
    Check.innerHTML = '{{CheckNum}}';
    Bank_Deposit.innerHTML = '{{Deposit}}';
    Deposit_Date.innerHTML = '{{DepositDate}}';
    Verification.innerHTML = '{{Ver}}';
    Verification_Date.innerHTML = '{{VerDate}}';

    localStorage.setItem("data", $('#table').html());

</script>
Stephen Lu
  • 13
  • 3
  • 4
    Possible duplicate of [Save data to local storage](https://stackoverflow.com/questions/23743862/save-data-to-local-storage) – Alexander Nied Jul 22 '18 at 23:14

1 Answers1

0

I try this code and it works. note that I add most of code to addRow function and call it when needed. try these changes and tell me if they work.

<script>
var table = document.getElementById("orders");
if(localStorage.tableData==undefined){localStorage.tableData=table.innerHTML};
table.innerHTML = localStorage.tableData;
function addRow(){
var row = table.insertRow(-1);
var Order_ID = row.insertCell(0);
var Order_Date = row.insertCell(1);
var Customer_Name = row.insertCell(2);
var Order_Balance_without_tax = row.insertCell(3);
var Downpayment_Balance = row.insertCell(4);
var Order_Delivered = row.insertCell(5);
var Delivery_Date = row.insertCell(6);
var Final_Order_Balance_with_tax = row.insertCell(7);
var Revenue_Check = row.insertCell(8);
var Payment_Received = row.insertCell(9);
var Receival_Date = row.insertCell(10);
var Check = row.insertCell(11);
var Bank_Deposit = row.insertCell(12);
var Deposit_Date = row.insertCell(13);
var Verification = row.insertCell(14);
var Verification_Date = row.insertCell(15);
Order_ID.innerHTML = '{{ID}}';
Order_Date.innerHTML = '{{OrderDate}}';
Customer_Name.innerHTML = '{{CustomerName}}';
Order_Balance_without_tax.innerHTML = '{{OrderBalance}}';
Downpayment_Balance.innerHTML = '{{Downpayment}}';
Order_Delivered.innerHTML = '{{Delivery}}';
Delivery_Date.innerHTML = '{{DeliveryDate}}';
Final_Order_Balance_with_tax.innerHTML = '{{FinalOrderBalance}}';
Revenue_Check.innerHTML = '{{RCheck}}';
Payment_Received.innerHTML = '{{PReceival}}';
Receival_Date.innerHTML = '{{PaymentDate}}';
Check.innerHTML = '{{CheckNum}}';
Bank_Deposit.innerHTML = '{{Deposit}}';
Deposit_Date.innerHTML = '{{DepositDate}}';
Verification.innerHTML = '{{Ver}}';
Verification_Date.innerHTML = '{{VerDate}}';
localStorage.tableData=table.innerHTML;
           };
    </script>
Lobna Ibrahim
  • 33
  • 4