会话存储:如何存储多个对象

Question

我试图将多个学生对象(构建于表单提交)存储到会话存储中，然后循环处理会话存储，并将它们显示在页面上。我对这件事不太熟悉，这是我第一次尝试.如何存储多个学生？我觉得我需要一个附件..。我只是每次都重写..。谢谢！

顺便说一句。一定是纯JS

             <div id="infoStyle" class="col-lg-6 center-block infoWindow animated">
                <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                <h4>First Name : <input id="fName" type="text" pattern="[A-Za-z]{50}" title="50 characters or less"></h4>
                <h4>Last Name : <input id="lName" type="text" pattern="[A-Za-z]{50}" title="50 characters or less"></h4>
                <h4>Email Address : <input id="email" type="email"></h4>
                <br>
                <a onclick="createStudent()" class="btn btn-info" role="button">Create Student</a>
                <br><br>
                <a onclick="cancel()" class="btn btn-danger" role="button">Cancel</a>
             </div>

JS

    function createStudent(){

    var student = new Object();

    student.fName = document.getElementById('fName').value;
    student.lName = document.getElementById('lName').value;
    student.email = document.getElementById('email').value;

    sessionStorage.setItem('student', JSON.stringify(student));

    var retrievedObject = sessionStorage.getItem('student');
    console.log('retrievedObject: ', JSON.parse(retrievedObject));

}

Answer 1

1)您需要存储到array中，但在此之前，您需要检查数组学生是否已经在sessionStorage上存在。

2)然后将一个新学员添加到数组中，并将其存储到本地存储中。

3)当您检索数据时，没有任何更改，但它更正了您所写的内容

function createStudent(){


      // this is how you set it
    var newStudent = new Object();

    newStudent .fName = document.getElementById('fName').value;
    newStudent .lName = document.getElementById('lName').value;
    newStudent .email = document.getElementById('email').value;

    if(sessionStorage.student)
    {
     student= JSON.parse(sessionStorage.getItem('student'));
    }else{
     student=[];
    }
    student.push(newStudent )
    sessionStorage.setItem('student', JSON.stringify(student));

       // this is how you will retrive it

    var retrievedObject = sessionStorage.getItem('student');
    console.log('retrievedObject: ', JSON.parse(retrievedObject));

}

这是小提琴

Answer 2

工作..。

    function createStudent(){

    var newStudent = new Object();

    newStudent.fName = document.getElementById('fName').value;
    newStudent.lName = document.getElementById('lName').value;
    newStudent.email = document.getElementById('email').value;

    if(sessionStorage.student)
    {
     student= JSON.parse(sessionStorage.getItem('student'));
    }else{
     student=[];
    }
 student.push(newStudent )   
    console.log(student);
    sessionStorage.setItem('student', JSON.stringify(student));

    var retrievedObject = sessionStorage.getItem('student');
    console.log('retrievedObject: ', JSON.parse(retrievedObject));


}