Example of Using Local Storage to build dynamic Table through form mulitple Inputs

Below I have provide a code packet to show you the brief example of "Local Storage" attribute. I have created a form and get the values from the inputs and created a "Dynamic Table" and save data in local storage. You can go through it and used it as per need.

<!-- =HTML Content Start= -->
<div class="pageContainer">
    <div class="formContainer">
    <form class="formRow" name="personalInfoForm" id="personalInfoForm">
        <dl class="bio_dtl_form" id="bio_dtl_container">
          <dt><label for="fName">Name</label></dt>
          <dd>
          <input type="text" value="" name="fName" placeholder="Your First Name" class="input-fields" />
          </dd>
          <dt><label for="age">Age</label></dt>
          <dd>
          <input type="text" value="" name="age" placeholder="Your Age" class="input-fields" />
          </dd>
          <dt><label for="qualification">Qualification</label></dt>
          <dd>
          <input type="text" value="" name="qualification" placeholder="Your Qualification" class="input-fields" />
          </dd>
          <dt><label for="institutionName">Institution Name</label></dt>
          <dd>
          <input type="text" value="" name="institutionName" placeholder="Institution Name" class="input-fields" />
          </dd>
          <dt><label for="experience">Years Of Experience</label></dt>
          <dd>
          <input type="text" value="" name="experience" placeholder="Your Experience" class="input-fields" />
          </dd>
        </dl>
        <div class="btn-row">
            <input type="button" value="Save Data" name="btnSave" class="btn-saveData" id="btn-saveData" />
            <input type="button" value="Load Data" name="btnload" class="btn-loadData" />
        </div>
    </form>
    </div>

    <!-- =Table Container Start= -->
    <div id="tableContainer" class="tableContainer">
        <table class="formDataTbl" border="0" cellspacing="0" cellpadding="0" id="formDataTbl">
        <thead>
            <tr>
                <th>First Name</th> 
                <th>Age</th> 
                <th>Qualification</th> 
                <th>Institution Name</th> 
                <th>Years Of Experience</th>
            </tr>
        </thead>
        <tbody id="tblContentBody"></tbody>
        </table>
    </div><!-- =Table Container End//= -->
</div>
 

<!-- =jQuery Script Files= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function() { 
        var formValueArr = {
            fName : "",
            age : "",
            qualification : "",
            institution : "",
            experience : "",

        };
        var formValueStorage = { 
            saveItems: function() { 
                var lsCount = localStorage.length;
                var inputs = document.getElementsByClassName("input-fields");
                formValueArr.fName = inputs[0].value;
                formValueArr.age = inputs[1].value;
                formValueArr.qualification = inputs[2].value;
                formValueArr.institution = inputs[3].value;
                formValueArr.experience = inputs[4].value;
                //Convert the object into JSON ans set it into LocalStorage 
                localStorage.setItem("formValueArr_" + lsCount, JSON.stringify(formValueArr)); 
                //Reload the Page 
                location.reload();
            },

            //Load Data Items Function
            loadDataItems: function() {
                var datacount = localStorage.length; 
                if (datacount & gt; 0) { 
                    for (i = 0; i & lt; datacount; i++) { 
                        var key = localStorage.key(i); 
                        var dataValue = localStorage.getItem(key); 
                        var dataValueList = JSON.parse(dataValue);                            
                        var tblBodyContent = ""+ dataValueList.fName+"";
                        tblBodyContent += ""+ dataValueList.age+"";
                        tblBodyContent += ""+ dataValueList.qualification+"";
                        tblBodyContent += ""+ dataValueList.institution+"";
                        tblBodyContent += ""+ dataValueList.experience+"";
                        tblBodyContent += "";
                        //Append Row and Cell Content
                        $('#tblContentBody').append(tblBodyContent);
                     }
                } //If Condition End//
            }, //Load Data Items Function End//
        };
        //Save Button Event
        var btnSaveData = document.getElementById('btn-saveData'); 
        btnSaveData.addEventListener('click', formValueStorage.saveItems, false); 
        window.onload = function() { 
                formValueStorage.loadDataItems();
        }; 
}); //Document REady Function End//
</script>

<style type="text/css">
body{
    margin:0;
    padding:0;
    font:14px Tahoma, Geneva, sans-serif;
    background:#efefef; 
}
.pageContainer {
    width:75%;
    height:700px;
    margin:0 auto;
    box-shadow:0 2px 3px #b3b3b3; 
}
.formContainer .bio_dtl_form {
    margin:0;
    padding:10px 20px; 
}
.formContainer .bio_dtl_form dt {
    width:25%;
    display:inline-block;
    margin:10px 0; 
}
.formContainer .bio_dtl_form dd {
    width:70%;
    display:inline-block;
    vertical-align:top;
}
.formContainer .bio_dtl_form dd input[type='text'] {
    width:100%;
    max-width:300px;
    display:block;
    padding:10px 5px;
    margin:10px 0; 
}
.btn-row {
    margin-top:20px;
    margin-left:24%; 
}
.tableContainer .formDataTbl { width:100%; margin:20px 0; border :1px solid #d9d9d9; }
.tableContainer .formDataTbl th {
    background-color: #111;
    color:#fff;
}
.tableContainer .formDataTbl th,
.tableContainer .formDataTbl td {
    padding:5px 10px;
    border:1px solid #d7d7d7; 
}
</style>