How to get Data from another page Local Storage?

Question

``I'm trying to get the json data stored in local storage. How to get the local storage data from one page to another page in the same domain?

In MainPage.html "user" is stored in localstorage and i'm printing the values In AddEmploye.html the data is appended to user data stored in local storage, but when i go to MainPage.html the previous is displayed without data inserted in AddEmploye.html

How to overcome this issue. Thank you.

MainPage.html

<html>
<head>
 <meta charset="UTF-8"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.header{
    background-color:black;
    position:relative;
    top:0;
    left:0;
    width:100%;
}
.header h1{
    color:white;
}
</style>
<body>

<div class="container-fluid">
    <div class="header">
        <h1>Employees</h1>
    </div>
    <!-- Add Employee area!-->
    <div class="addButton">
        <div class="row">
            <div class="col-sm-10">
                <h3>Employee Details</h3>
            </div>
            <div class="col-sm-2">
                <form action="AddEmploye.html">
                <button class="btn btn-success"><i class="fa fa-plus"></i>&nbsp;&nbsp;&nbsp;&nbsp;Add Employee</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-xs-">
                        <label class="col-sm-2" for="ex1"><strong>Show entries</strong></label>
                    </div>
                    <div class="col-sm-2">
                        <input class="form-control" id="number" type="number" value="10" placeholder="no of entries">
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="row">
                    <div class="col-xs-1">
                        <label class="col-sm-2" for="ex1"><strong>Search</strong></label>
                    </div>
                    <div class="col-sm-8">
                        <input type="text" onkeyup="searchTable()" id="myInput" name="employe" width="20rem"placeholder="search for Employee" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Employee Details area-->
    <div class="table-responsive" >
        <table class="table table-bordered table-striped" id="myTable" data-pagination="true">
            <thead>
                <tr>
                    <th data-field="email">Email</th>
                    <th data-field="image">Image</th>
                    <th data-field="status">Is Active</th>
                    <th data-field="mobile">Mobile</th>
                    <th data-field="college">College</th>
                    <th data-field="name">Actions</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>


    <!--modal content-->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

        <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header bg-success">
                    <h4>Toggle Employe Status</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button><br>
                </div>
                <div class="modal-body">
                    <p style="color:red">Are you sure you want to disable this user?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>



</div>
<!--Script for local storage -->
<script>
    var user = {
        "employee": [
            { 
                "fName":"xxx",
                "lName":"yyy",
                "mobile":"12345678987",
                "email":"xxx.xxx888@gmail.com", 
                "image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
                "college":"IIT",
                "status":'<i class="fa fa-times-circle" style="color:red; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
            },
            { 
                "fName":"YYY",
                "lName":"YYY",
                "mobile":"98765434567",
                "email":"yyy.yyy111@gmail.com", 
                "image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
                "college":"NIT",
                "status":'<i class="fa fa-check-circle" style="color:green; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
            },


        ]
    };

    var Data=JSON.stringify(user);
    localStorage.setItem("userData", Data);
    //get the stored data 
    var Name=localStorage.getItem("userData");
    //parse the data to JSON
    var Obj=JSON.parse(Name);
    //for debugging
    console.log(Obj);

    var i;
    var k=Obj.employee.length;
    console.log(k);
    for(i=0;i<k;i++){
        var table = document.getElementById("myTable");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        cell1.innerHTML=Obj.employee[i].email;
        cell2.innerHTML=Obj.employee[i].image;
        cell3.innerHTML=Obj.employee[i].status;
        cell4.innerHTML=Obj.employee[i].mobile;
        cell5.innerHTML=Obj.employee[i].college;
        cell6.innerHTML='<button class="btn btn-warning" onclick="deleteRow(this)"><span style="color:white"><i class="fa fa-edit"></i>&nbsp;Delete</span></button>';   
    }
    function deleteRow(r) {

        var i = r.parentNode.parentNode.rowIndex;
        document.getElementById("myTable").deleteRow(i);
        delete Obj.employee[0];
        console.log(Obj);
    }

</script>
<!--Javascipt -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>




</body>

</html>

AddEmploye.html

<html>
<head>
 <meta charset="UTF-8"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>

.header{
    background-color:black;
    position:relative;
    top:0;
    left:0;
    width:100%;
}
.header h1{
    color:white;
}

</style>
<body>

<div class="container-fluid">
    <div class="header">
        <h1>Add Employees</h1>
    </div>
    <h2>Add Employee</h2>
    <form name="details" onsubmit="addDetails()" method="post">
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="FirstName">FirstName *</label></strong>
            <input type="text" class="form-control" name="fname">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Branch *</label></strong>
            <select class="form-control" placeholder="--Select Branch--" name="branch">
                <option class="form-control" value="CSE">CSE</option>
                <option class="form-control" value="ECE">ECE</option>
                <option class="form-control" value="IT">IT</option>
                <option class="form-control" value="MANAGEMENT">MANAGEMENT</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="FirstName">LastName *</label></strong>
            <input type="text" class="form-control" name="lname">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Date of Joining *</label></strong>
            <input type="date" name="date" class="form-control">

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="FirstName">Mobile Number *</label></strong>
            <input type="text" class="form-control" name="mobile">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Stream *</label></strong>
            <select class="form-control" placeholder="--Select Branch--" name="stream">
                <option class="form-control" value="CSE">CSE</option>
                <option class="form-control" value="ECE">ECE</option>
                <option class="form-control" value="IT">IT</option>
                <option class="form-control" value="MANAGEMENT">MANAGEMENT</option>
            </select>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Date of Birth *</label></strong>
            <input type="date" name="dob" class="form-control">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Language *</label></strong>
            <select class="form-control" placeholder="--Select Language--" name="language">
                <option class="form-control" value="Telugu">Telugu</option>
                <option class="form-control" value="English">English</option>
                <option class="form-control" value="Hindi">Hindi</option>
                <option class="form-control" value="Oriya">Oriya</option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Email *</label></strong>
            <input type="email" name="email" class="form-control">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Photograph *</label></strong>


        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Gender *</label></strong><br>
            <input name="gender" value="male" type="radio"/>
            <label for="male">Male </label>
            <input name="gender" value="female" type="radio"/>
            <label for="female">Female </label>
        </div>
        <div class="col-sm-6">

        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">College *</label></strong>
            <select class="form-control" placeholder="--Select College--" name="college">
                <option class="form-control" value="RGUKT">RGUT</option>
                <option class="form-control" value="VIT">VIT</option>
                <option class="form-control" value="IIIT">IIIT</option>
                <option class="form-control" value="IIT">IIT</option>
            </select>
        </div>
        <div class="col-sm-6">


        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Qualification *</label></strong>
            <select class="form-control" placeholder="--Select College--" name="qualification">
                <option class="form-control" value="BTECH">BTech</option>
                <option class="form-control" value="MTECH">MTech</option>
                <option class="form-control" value="MBA">MBA</option>
            </select>
        </div>
        <div class="col-sm-6">


        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Year of Graduation *</label></strong>
            <select class="form-control" placeholder="--Select Year--" name="yog">
                <option class="form-control" value="2017">2017</option>
                <option class="form-control" value="2018">2018</option>
                <option class="form-control" value="2019">2019</option>
            </select>
        </div>
        <div class="col-sm-6">
            <strong><label for="DOB">  </label></strong><br>
            <button class="btn btn-success"type="submit">Add</button>

        </div>
    </div>
    </form>
</div>
<script>
var Name=localStorage.getItem("userData");
var Obj=JSON.parse(Name);
console.log(Obj);
function addDetails(){
    var fName=document.details.fname.value;
    var lName=document.details.lname.value;
    var branch=document.details.branch.value;
    var mobile=document.details.mobile.value;
    var doj=document.details.date.value;
    var stream=document.details.stream.value;
    var dob=document.details.dob.value;
    var language=document.details.language.value;
    var email=document.details.email.value;
    var gender=document.details.gender.value;
    var college=document.details.college.value;
    var qualification=document.details.qualification.value;
    var yog=document.details.yog.value;

    Obj.employee.push(
        {
            "fName":fName,
            "lName":lName,
            "mobile":mobile,
            "email":email, 
            "image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
            "college":college,
            "status":'<i class="fa fa-check-circle" style="color:green; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
        }
    );
    console.log(Obj);
    var Data=JSON.stringify(Obj);
    //store the string format data in local storage
    localStorage.setItem("userData", Data);
    window.location='MainPage.html'; 
}
</script>
</body>
</html>

Local storage doesn't separate storage by page, just by origin. So provided the one page is storing it, the other page will see it, if they're in the same origin. — T.J. Crowder, Feb 17 '18 at 16:33
@T.J.Crowder the data inserted in AddEmploye.html is not reflected in the MainPage.html the same local storage is used. — Madhu, Feb 17 '18 at 16:35
Just to make it clear. Read more on: https://stackoverflow.com/a/18709586/6099347 — Aniket Sahrawat, Feb 17 '18 at 16:38
@AniketSahrawat Thank you, but what i am asking is: "in Addemploye.html" the data is inserted and stored in local storage when i again open MainPage.html the inserted value is not reflected" Both the pages are in same domain. Thank you. — Madhu, Feb 17 '18 at 16:41
Are you just trying to update the UI in real time without having to require a page refresh? As the others have said, local storage can be accessed across multiple pages on the same domain. I've recently implemented a feature for my company where you have a wishlist, when items are added, it updates the UI across all relevant pages in real time. — JO3-W3B-D3V, Feb 17 '18 at 16:41
@Madhu Because you are overriding the values of `userData` on `MainPage.html`. Remove all the js lines before `var Name=localStorage.getItem("userData");` and it will work fine after that. — Aniket Sahrawat, Feb 17 '18 at 16:51
@AniketSahrawat Thank you, But at the first time the UI need to get the data from that users json only na. — Madhu, Feb 17 '18 at 16:54

JO3-W3B-D3V · Accepted Answer · 2018-02-17T19:11:43.660

Solution

In MainPage.html I noticed you were running localStorage.setItem("userData", Data);, well this would override any data that's being added from AddEmploye.html, so what I did was check to see if userData existed in the localStorage, if not, then set it, otherwise continue.

You need to be aware, using setItem will just flat out override the data, not append to it. It's like doing the following:

var arr = [1];
arr = [2];

Whereas you want to be doing something more like:

var arr = [];
arr.push(1);
arr.push(2);

Edit

Turns out your solution was already kinda there, it was just one of those silly mistakes! Don't worry, even the best of us do silly things like this from time to time.

Hope this fixes your problem! :)

<html>
<head>
 <meta charset="UTF-8"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.header{
    background-color:black;
    position:relative;
    top:0;
    left:0;
    width:100%;
}
.header h1{
    color:white;
}
</style>
<body>

<div class="container-fluid">
    <div class="header">
        <h1>Employees</h1>
    </div>
    <!-- Add Employee area!-->
    <div class="addButton">
        <div class="row">
            <div class="col-sm-10">
                <h3>Employee Details</h3>
            </div>
            <div class="col-sm-2">
                <form action="AddEmploye.html">
                <button class="btn btn-success"><i class="fa fa-plus"></i>&nbsp;&nbsp;&nbsp;&nbsp;Add Employee</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-xs-">
                        <label class="col-sm-2" for="ex1"><strong>Show entries</strong></label>
                    </div>
                    <div class="col-sm-2">
                        <input class="form-control" id="number" type="number" value="10" placeholder="no of entries">
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="row">
                    <div class="col-xs-1">
                        <label class="col-sm-2" for="ex1"><strong>Search</strong></label>
                    </div>
                    <div class="col-sm-8">
                        <input type="text" onkeyup="searchTable()" id="myInput" name="employe" width="20rem"placeholder="search for Employee" class="form-control">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Employee Details area-->
    <div class="table-responsive" >
        <table class="table table-bordered table-striped" id="myTable" data-pagination="true">
            <thead>
                <tr>
                    <th data-field="email">Email</th>
                    <th data-field="image">Image</th>
                    <th data-field="status">Is Active</th>
                    <th data-field="mobile">Mobile</th>
                    <th data-field="college">College</th>
                    <th data-field="name">Actions</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>


    <!--modal content-->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

        <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header bg-success">
                    <h4>Toggle Employe Status</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button><br>
                </div>
                <div class="modal-body">
                    <p style="color:red">Are you sure you want to disable this user?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Yes</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>



</div>
<!--Script for local storage -->
<script>
    var user = {
        "employee": [
            { 
                "fName":"xxx",
                "lName":"yyy",
                "mobile":"12345678987",
                "email":"xxx.xxx888@gmail.com", 
                "image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
                "college":"IIT",
                "status":'<i class="fa fa-times-circle" style="color:red; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
            },
            { 
                "fName":"YYY",
                "lName":"YYY",
                "mobile":"98765434567",
                "email":"yyy.yyy111@gmail.com", 
                "image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
                "college":"NIT",
                "status":'<i class="fa fa-check-circle" style="color:green; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
            },


        ]
    };

    var Data=JSON.stringify(user);
 if (localStorage.getItem("userData") === null || typeof localStorage.getItem("userData") === "undefined") {
  localStorage.setItem("userData", Data);
 }
    //get the stored data 
    var Name=localStorage.getItem("userData");
    //parse the data to JSON
    var Obj=JSON.parse(Name);
    //for debugging
    console.log(Obj);

    var i;
    var k=Obj.employee.length;
    console.log(k);
    for(i=0;i<k;i++){
        var table = document.getElementById("myTable");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        cell1.innerHTML=Obj.employee[i].email;
        cell2.innerHTML=Obj.employee[i].image;
        cell3.innerHTML=Obj.employee[i].status;
        cell4.innerHTML=Obj.employee[i].mobile;
        cell5.innerHTML=Obj.employee[i].college;
        cell6.innerHTML='<button class="btn btn-warning" onclick="deleteRow(this)"><span style="color:white"><i class="fa fa-edit"></i>&nbsp;Delete</span></button>';   
    }
    function deleteRow(r) {

        var i = r.parentNode.parentNode.rowIndex;
        document.getElementById("myTable").deleteRow(i);
        delete Obj.employee[0];
        console.log(Obj);
    }

</script>
<!--Javascipt -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>




</body>

</html>

Edit 2

I have the solution to redirect the user to MainPage.html included below.

AddEmployee.html

<html>
<head>
 <meta charset="UTF-8"> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>

.header{
    background-color:black;
    position:relative;
    top:0;
    left:0;
    width:100%;
}
.header h1{
    color:white;
}

</style>
<body>

<div class="container-fluid">
    <div class="header">
        <h1>Add Employees</h1>
    </div>
    <h2>Add Employee</h2>
    <form name="details" onsubmit="return addDetails();" method="post">
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="FirstName">FirstName *</label></strong>
            <input type="text" class="form-control" name="fname">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Branch *</label></strong>
            <select class="form-control" placeholder="--Select Branch--" name="branch">
                <option class="form-control" value="CSE">CSE</option>
                <option class="form-control" value="ECE">ECE</option>
                <option class="form-control" value="IT">IT</option>
                <option class="form-control" value="MANAGEMENT">MANAGEMENT</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="FirstName">LastName *</label></strong>
            <input type="text" class="form-control" name="lname">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Date of Joining *</label></strong>
            <input type="date" name="date" class="form-control">

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="FirstName">Mobile Number *</label></strong>
            <input type="text" class="form-control" name="mobile">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Stream *</label></strong>
            <select class="form-control" placeholder="--Select Branch--" name="stream">
                <option class="form-control" value="CSE">CSE</option>
                <option class="form-control" value="ECE">ECE</option>
                <option class="form-control" value="IT">IT</option>
                <option class="form-control" value="MANAGEMENT">MANAGEMENT</option>
            </select>

        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Date of Birth *</label></strong>
            <input type="date" name="dob" class="form-control">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Language *</label></strong>
            <select class="form-control" placeholder="--Select Language--" name="language">
                <option class="form-control" value="Telugu">Telugu</option>
                <option class="form-control" value="English">English</option>
                <option class="form-control" value="Hindi">Hindi</option>
                <option class="form-control" value="Oriya">Oriya</option>
            </select>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Email *</label></strong>
            <input type="email" name="email" class="form-control">
        </div>
        <div class="col-sm-6">
            <strong><label for="FirstName">Photograph *</label></strong>


        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Gender *</label></strong><br>
            <input name="gender" value="male" type="radio"/>
            <label for="male">Male </label>
            <input name="gender" value="female" type="radio"/>
            <label for="female">Female </label>
        </div>
        <div class="col-sm-6">

        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">College *</label></strong>
            <select class="form-control" placeholder="--Select College--" name="college">
                <option class="form-control" value="RGUKT">RGUT</option>
                <option class="form-control" value="VIT">VIT</option>
                <option class="form-control" value="IIIT">IIIT</option>
                <option class="form-control" value="IIT">IIT</option>
            </select>
        </div>
        <div class="col-sm-6">


        </div>
    </div>

    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Qualification *</label></strong>
            <select class="form-control" placeholder="--Select College--" name="qualification">
                <option class="form-control" value="BTECH">BTech</option>
                <option class="form-control" value="MTECH">MTech</option>
                <option class="form-control" value="MBA">MBA</option>
            </select>
        </div>
        <div class="col-sm-6">


        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <strong><label for="DOB">Year of Graduation *</label></strong>
            <select class="form-control" placeholder="--Select Year--" name="yog">
                <option class="form-control" value="2017">2017</option>
                <option class="form-control" value="2018">2018</option>
                <option class="form-control" value="2019">2019</option>
            </select>
        </div>
        <div class="col-sm-6">
            <strong><label for="DOB">  </label></strong><br>
            <button class="btn btn-success"type="submit">Add</button>

        </div>
    </div>
    </form>
</div>
<script>
var Name=localStorage.getItem("userData");
var Obj=JSON.parse(Name);
console.log(Obj);
function addDetails(){
    var fName=document.details.fname.value;
    var lName=document.details.lname.value;
    var branch=document.details.branch.value;
    var mobile=document.details.mobile.value;
    var doj=document.details.date.value;
    var stream=document.details.stream.value;
    var dob=document.details.dob.value;
    var language=document.details.language.value;
    var email=document.details.email.value;
    var gender=document.details.gender.value;
    var college=document.details.college.value;
    var qualification=document.details.qualification.value;
    var yog=document.details.yog.value;

    Obj.employee.push(
        {
            "fName":fName,
            "lName":lName,
            "mobile":mobile,
            "email":email, 
            "image":'<img src="/home/chintu/Pictures/max volume.png" height="90" width="90"><br>',
            "college":college,
            "status":'<i class="fa fa-check-circle" style="color:green; font-size:3em" data-toggle="modal" data-target="#myModal"></i>'
        }
    );
    console.log(Obj);
    var Data=JSON.stringify(Obj);
    //store the string format data in local storage
    localStorage.setItem("userData", Data);
    window.location='MainPage.html'; 
   return false;
}
</script>
</body>
</html>

Edit 3

This seems to work just fine for myself. I highly suggest you look at re-writing this function, just because I banged this together in like 30 seconds, it's messy, I appreciate that, but nevertheless it works.

function deleteRow(r) {
    var i = r.parentNode.parentNode.rowIndex;
    document.getElementById("myTable").deleteRow(i);
    delete Obj.employee[0];
    var employees = JSON.parse(localStorage.getItem("userData")).employee.reverse();
    var tempArray = [];
    for (var j = - 1, s = employees.length - 1; j < s; s--) {
        if (s !== (i - 1)) { tempArray.push(employees[s]); }
    }
    employees = tempArray;
    var update = JSON.stringify({employee:employees});
    localStorage.setItem("userData", update);
}

Edit 4

Okay, I'm not sure if this is 100% bullet proof, I've only vaguely tested it. But I was just playing around with the JS inside of MainPage.html and I came up with this, it worked for my tests that I threw at it, but again, I've not done detailed testing, I'm sure that if you notice any bugs, you'll be able to sort them out? ;)

FYI I've rushed the hell outta this just to help you, I know it works to SOME degree or another, but if you notice any bugs, again, I'm sure you can work it out? ... If not, drop me an email and I'll re-do the whole thing for you, I'll even encapsulate it all into one nice object! ;)

... Also seeing as I've given you a link to my website, I suggest that you go on there and check out the git link that's provided on my web page... Take a look at the wishlist implementation, I appreciate I rammed everything into one large file, so if you struggle to find it, just press ctrl + f 'WishList', I've implemented a generic wishList using local storage! :P

var i;
var MAX_ROWS = 5;
var indentations = [0, MAX_ROWS];
var k=Obj.employee.length;
console.log(k);
for(i  = k-1; i  > 0; i--){
    var table = document.getElementById("myTable");
        var row = table.insertRow(1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        cell1.innerHTML=Obj.employee[i].email;
        cell2.innerHTML=Obj.employee[i].image;
        cell3.innerHTML=Obj.employee[i].status;
        cell4.innerHTML=Obj.employee[i].mobile;
        cell5.innerHTML=Obj.employee[i].college;
        cell6.innerHTML='<button class="btn btn-warning" onclick="deleteRow(this)"><span style="color:white"><i class="fa fa-edit"></i>&nbsp;Delete</span></button>';   
    if (i <= MAX_ROWS) {
        var endVal = indentations[indentations.length - 1];
        if (i % 5 === 0) { indentations.push(i + MAX_ROWS); }
        else if (endVal < k && i == 1) {
            endVal = endVal + MAX_ROWS;
            indentations.push(endVal);
        }
    }
}

renderTbl(0, 5);

console.log(indentations);
var before = document.getElementById("myModal");
for (var j = 0, s = indentations.length; j < s; j++) {
    var start = indentations[j];
    var end = start + MAX_ROWS;
    var btn = document.createElement("div");
    btn.className = "btn";
    btn.innerHTML = start + " ... " + end;
    before.insertAdjacentElement("beforeBegin", btn);
}

var btns = document.querySelectorAll(".btn");
for (var j = 0, s = btns.length; j < s; j++) {
    var btn = btns[j];
    btn.addEventListener("click", function(){
        var arr = this.textContent.split("...");
        var start = arr[0];
        var end = arr[1];
        renderTbl(start, end);
    });
}


function renderTbl (start, end, arr) {
    var table = document.getElementById("myTable");
    var rows = table.querySelectorAll("tr");
    console.log(rows);
    end = parseInt(end);
    start = parseInt(start) + 1;
    console.log(start) + 1;
    console.log(end);
    for (var i = 0; i < k; i++) {
        console.log(rows[i].innerHTML);
        if (i < start || i > end) {
            rows[i].style.display = "none";
        } else {
            rows[i].style.display = "table-row";
        }
    }
    rows[0].style.display = "table-row";
}

Thank you, But after submitting the data it should redirect to MainPage.html How to overcome this issue. — Madhu, Feb 17 '18 at 16:59
I think getting the data followed by adding necessary objects and then storing it back makes much sense. Isn't it? — Aniket Sahrawat, Feb 17 '18 at 17:04
@Madhu, in the function `addDetails()` insert as a last line `return false;` and with the `onSubmit` attribute, include return before `addDetails()`! :) — JO3-W3B-D3V, Feb 17 '18 at 17:08
@Madhu my previous comment includes the answer to redirecting to MainPage.html! ;) — JO3-W3B-D3V, Feb 17 '18 at 17:09
@JO3-W3B-D3V Thank you so much, You solved it, actually i'm trying it since last night but i couldn't. :) — Madhu, Feb 17 '18 at 17:13
@Madhu it's my pleasure! I've done a LOT of work with local storage as of recently, probably too much... As for form submission, that's just basic js stuff. If you want to assign the event of on submit in JS alone, then you'd use `e.preventDefault();`, I'd look into that too if I were you! Just a tip! ;) — JO3-W3B-D3V, Feb 17 '18 at 17:14
@JO3-W3B-D3V can you do me one more answer. On the MainPage.html when the delete button is clicked the row is deleted at the same time the data in the json should also be deleted. Thank you so much for your answer. — Madhu, Feb 17 '18 at 17:15
@Madhu sure thing, since I'm here, I'll take a look at the code again, gimme a sec! ;P — JO3-W3B-D3V, Feb 17 '18 at 17:17
@Madhu sorry, I was occupied for a second there, here's a solution, it may not be the most elegant solution in the world, but hell, it works.. At least when I quickly tested it. — JO3-W3B-D3V, Feb 17 '18 at 17:52
@JO3-W3B-D3V Thank you so much, I'm very thankful to you So, how can i add pagination to the table? It might irritate you, but you are the only one who is soving these — Madhu, Feb 17 '18 at 17:58
@Madhu it's no problem at all. I'll bang together another quick script for you now. I'm happy to help with an issue like this because I've already encountered such problems and solved them myself, and I recall how the first time doing these problems... *shakes head*.... It took me longer than I'd like to admit! Lol... — JO3-W3B-D3V, Feb 17 '18 at 18:01
@JO3-W3B-D3V I really appreciate you work and love your help towards me. I'm very much happy that i can find some one like you in my life :) Thank you so much. Actually i tried a lot but i failed to do so. So, your full name please? — Madhu, Feb 17 '18 at 18:05
@Madhu I'm still here, I'm just thinking of how to do this in an effective way... I started to do it one way, then I remembered that the way I was doing it would break the delete function all together... XD .... So I have to start again... Gimme a min or so.... — JO3-W3B-D3V, Feb 17 '18 at 18:28
@JO3-W3B-D3V Thanks man, I thought you are gone and i can't ask such question again in stackoverflow. — Madhu, Feb 17 '18 at 18:31
@JO3-W3B-D3V hey, joe please help me man.I'm stuck here trying to solve but, i couldn't :( — Madhu, Feb 17 '18 at 18:53
@Madhu I've made a simple, but messy solution for pagination on the table, I just did it so it displays any 5 at a given time, I think it may be buggy, I didn't test it in a hell of a lot of detail, but I think it works to some degree or another. — JO3-W3B-D3V, Feb 17 '18 at 19:04
@Madhu, I can also provide you with a link to a real world implementation of my work with local storage if you like. — JO3-W3B-D3V, Feb 17 '18 at 19:05
@JO3-W3B-D3V Thanks a lot, i'll mail you if any :) So, please provide me a real world implementation of your work. — Madhu, Feb 17 '18 at 19:12
@Madhu it's fine, I'm more than capable of doing it, if I wasn't, I would've walked away... As for my real world implementation of my wishlist... Check out [this link](https://www.cruisenation.com/) ... Finally I'm going to be cheeky and ask that you upvote my answer! ;) — JO3-W3B-D3V, Feb 17 '18 at 19:14
@Madhu the link I provided you with, you can test it out across multiple pages, the UI updates across all pages in real time through some JS I'd done at the time, if I were to do it again, I could without a doubt make it a lot more efficient, i.e. when I built this feature, I didn't know about how you can write an onchange event for local storage, so I did it that way, I guess I could always update it, but ehh... It works... **If it ain't broken**... ;) — JO3-W3B-D3V, Feb 17 '18 at 19:17
@JO3-W3B-D3V i cannot upvote it because of my less reputation. But i think you are one of the best javascript developer. If you don't mind can i email you if i have any doubts, basically i'm a student and an aspiring webdeveloper. :) — Madhu, Feb 17 '18 at 19:20
@Madhu feel free to drop me an email at any time, IDK if I'd say I'm the among the **best**. But I do feel pretty damn confident when it comes to traditional JS. FYI. I'm also a student, but I'm a part time student and I work full time as a web developer, I've worked as both a full stack web developer and a front end web developer. I used to be the go to guy in my old place of work when it came to query optimisation, believe it or not, although I had the title `junior web developer`. I'm just a fast learner! ;) — JO3-W3B-D3V, Feb 17 '18 at 19:23