Хранение сеансов: как хранить несколько объектов

Question

Я пытаюсь хранить несколько объектов-учеников (созданных из представления формы) в хранилище сеансов, а затем, в конечном итоге, зацикливать содержимое сеанса и отображать их на странице. Я не очень хорошо знаком с этим и его первой трещиной ... Как хранить несколько учеников? я чувствую, что мне нужно добавить ... им просто переписывать каждый раз ... Спасибо!

кстати ... должен быть чистым JS

HTML

   <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) Затем добавьте новый студент в массив, и хранить его в LocalStorage

3) в то время как вы retrive данные нет никаких изменений, то исправить то, что вы написали

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

} 

Здесь является jsfiddle

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


}