javascript 会话存储：如何存储多个对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28606841/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Session Storage: how to store multiple objects
提问by JayD
Im trying to store multiple student objects (built from a form submission) into session storage and then eventually loop over session storage and display them on a page. Im not very familiar with any of this and its my first crack at it... How do i store multiple students ? i feel like i need an append... im just overwriting every time... Thanks !
我试图将多个学生对象（从表单提交构建）存储到会话存储中，然后最终循环会话存储并将它们显示在页面上。我对这些都不是很熟悉，这是我的第一次尝试......我如何存储多个学生？我觉得我需要一个附加...我只是每次都覆盖...谢谢！
btw... must be pure JS
顺便说一句......必须是纯JS
HTML
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
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));
}
采纳答案by Naeem Shaikh
1) You need to store into an array, but before that you will need to check if the array student already existson sessionStorage or not.
1）您需要存储到一个array，但在此之前您需要检查数组 student 是否已经存在于 sessionStorage 中。
2) Then add a new student to the array, and store it into localstorage
2）然后在数组中添加一个新的student，并存入localstorage
3) while you retrive the data there is no change, it correct what you have written
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));
}
Here is the jsfiddle
这是jsfiddle
回答by JayD
working...
在职的...
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));
}
