Question

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

在MainPage.html中，“user”存储在localstorage中，我正在打印值在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>

Answer 1

解决方案

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

您需要注意，使用userData只会覆盖数据，而不会附加到数据上。它就像执行以下操作一样：

localStorage

你希望做更多的事情：

setItem

修改

原来你的解决方案已经有点了，这只是其中一个愚蠢的错误！别担心，即使是我们中最好的人也会时不时地做这样愚蠢的事情。

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

＆＃13;

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

＆＃13;

编辑2

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

AddEmployee.html

＆＃13;

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

＆＃13;

编辑3

这似乎对我自己很好。我强烈建议你重新编写这个函数，只因为我在30秒内将它拼凑在一起，它很混乱，我很欣赏，但它仍然有效。

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

编辑4

好的，我不确定这是否是100％防弹，我只是模糊地测试过它。但我刚刚在<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>里面玩JS，我想出了这个，它对我的测试起作用了，但是，我还没有做过详细的测试，我＆＃39 ;我确定如果你发现任何错误，你能够解决它们吗？ ;）

仅供参考我为了帮助你而匆匆离开了地狱，我知道它可以用于某些学位或其他，但如果你发现任何错误，再一次，我相信你能解决它吗？ ...如果没有，请给我发一封电子邮件，我会为你重新做一切，我甚至将它全部封装成一个好的对象！ ;）

...还看到我已经给你链接到我的网站，我建议你去那里查看我网页上提供的git链接...看看愿望清单的实现，我很欣赏我把所有东西都撞到了一个大文件中，所以如果你很难找到它，只需按ctrl + f＆＃39; WishList＆＃39;，我已经使用本地存储实现了一个通用的wishList ！：P

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

如何从其他页面获取数据本地存储？

1 个答案:

解决方案

修改

编辑2

编辑3

编辑4