如何从另一个页面本地存储中获取数据？

【问题标题】：How to get Data from another page Local Storage?如何从另一个页面本地存储中获取数据？
【发布时间】：2018-07-28 08:18:26
【问题描述】：

``我正在尝试获取存储在本地存储中的 json 数据。如何将本地存储数据从一个页面获取到同域的另一个页面？

在 MainPage.html 中，“用户”存储在本地存储中，我正在打印值 在 AddEmploye.html 中，数据被附加到存储在本地存储中的用户数据中，但是当我转到 MainPage.html 时，显示的前一个数据没有插入到 AddEmploye.html 中

如何克服这个问题。 谢谢。

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>

【问题讨论】：

  • 本地存储不按页面分隔存储，仅按来源分隔。因此，如果一个页面正在存储它，那么如果它们位于同一来源，另一个页面就会看到它。
  • @T.J.Crowder AddEmploye.html 中插入的数据未反映在 MainPage.html 中，使用相同的本地存储。
  • 只是为了说清楚。阅读更多：stackoverflow.com/a/18709586/6099347
  • @AniketSahrawat 谢谢，但我要问的是：“在 Addemploye.html 中”当我再次打开 MainPage.html 时，数据被插入并存储在本地存储中，插入的值没有反映“两者这些页面在同一个域中。谢谢。
  • 您是否只是想实时更新 UI 而无需刷新页面？正如其他人所说，可以跨同一域上的多个页面访问本地存储。我最近为我的公司实现了一项功能，其中您有一个愿望清单，当添加项目时，它会实时更新所有相关页面的 UI。

标签： javascript json


【解决方案1】：

解决方案

在MainPage.html 中，我注意到您正在运行localStorage.setItem("userData", Data);，这将覆盖从AddEmploye.html 添加的任何数据，所以我所做的是检查userData 是否存在于localStorage 中，如果没有，则设置它，否则继续。

您需要注意，使用setItem 只会完全覆盖数据，而不是附加到它。这就像做以下事情：

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

而你想做的事情更像：

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

编辑

原来你的解决方案已经有了，这只是那些愚蠢的错误之一！别担心，即使是我们当中最优秀的人也会时不时地做这样的傻事。

希望这能解决您的问题！ :) 

<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>

编辑 2

我有将用户重定向到下面包含的 MainPage.html 的解决方案。

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>

编辑 3

这似乎对我自己很有效。我强烈建议你重新编写这个函数，因为我在 30 秒内把它组合在一起，这很混乱，我很感激，但它仍然有效。 

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);
}

编辑 4

好的，我不确定这是否 100% 防弹，我只是模糊地测试了它。 但我只是在MainPage.html 中玩弄 JS，我想出了这个，它适用于我的测试，但我没有做过详细的测试，我敢肯定，如果你注意任何错误，您将能够解决它们吗？ ;)

仅供参考我已经赶尽杀绝只是为了帮助你，我知道它在 SOME 程度上有效，但如果你发现任何错误，再次，我确定你能解决？ ...如果没有，给我发一封电子邮件，我会为你重新做整个事情，我什至会把它封装成一个漂亮的对象！ ;)

...还看到我给了你一个指向我网站的链接，我建议你去那里查看我网页上提供的 git 链接...看看愿望清单的实现，我很感激我把所有东西都塞进了一个大文件，所以如果你很难找到它，只需按 ctrl + f 'WishList'，我已经使用本地存储实现了一个通用的愿望清单！ :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";
}

【讨论】：

  • 谢谢，但是在提交数据后它应该重定向到 MainPage.html 如何克服这个问题。
  • 忍受我，我现在就改变它！
  • 我认为获取数据然后添加必要的对象然后将其存储回来很有意义。不是吗？
  • @Madhu，在函数addDetails() 中插入最后一行return false; 并带有onSubmit 属性，在addDetails() 之前包含return！ :)
  • @JO3-W3B-D3V 我非常感谢您的工作，并喜欢您对我的帮助。我很高兴能在我的生活中找到像你这样的人:) 非常感谢。其实我尝试了很多，但我没有这样做。那么，请问你的全名？
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-20
  • 2021-12-13
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode