个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 03:42:15 26 4
gpt4 key购买 nike

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

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

如何解决这个问题。谢谢。

<小时/>

主页.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>

最佳答案

解决方案

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

您需要注意，使用 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 的解决方案。

添加员工.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，我想出了这个，它适用于我扔给它的测试，但同样，我没有做过详细的测试，我确信如果您发现任何错误，您能够解决它们吗？ ;)

仅供引用我已经匆忙离开这只是为了帮助你，我知道它在某种程度上有效，但如果你再次发现任何错误，我确定你能解决？ ...如果没有，请给我发一封电子邮件，我会为您重新完成整个事情，我什至会将其全部封装到一个漂亮的对象中! ;)

...另外，由于我已经为您提供了我的网站的链接，因此我建议您继续访问我的网页上提供的 git 链接...看看愿望 list 的实现，我很感激我把所有东西都塞进了一个大文件中，所以如果你很难找到它，只需按 ctrl + f 'WishList'，我已经使用本地存储实现了一个通用的 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";
}

关于javascript - 如何从另一个页面本地存储获取数据？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48843431/

26 4 0
文章推荐： javascript - 在这种情况下，Sinon stub 不起作用吗？
文章推荐： html - 使用视口(viewport)拥有移动友好的网站
文章推荐： c++ - Catch block 不想捕获抛出的异常
文章推荐： javascript - 在JS文件中使用组件的成员变量
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com