How to keep the html table unchanged after refreshing the page

Issue

I have created a web page containing two text boxes to get user inputs, and a button to add those values to an html table as a new row. I have used JavaScript to do this function. Here is my code:

JavaScript code

function addData(tableID)
{   
            var t = document.getElementById("timeslot").value;
            var m = document.getElementById("mon").value;
        
            var table = document.getElementById(tableID);
         
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
        
            var cell1 = row.insertCell(0);
            var element1 = document.createTextNode(t);
            element1.type = "label";
            cell1.appendChild(element1);
        
            var cell2 = row.insertCell(1);
            var element2 = document.createTextNode(m);
            element2.type = "label";
            cell2.appendChild(element2);
}

HTML code

    <input type='button' name='Add' value='Add' style='width:130px;padding:10px;' onclick="addData('timetable')">

This code functions correctly. But when I refresh the page, the newly added rows are disappearing and my page becomes as it was, before I insert new rows. How do I avoid this and keep my table without changing the newly added fields?

Solution

Add it statically or dynamically each time the page reload.

Answered By - HMarioD