如何使用SessionStorage保存和恢复数据

我有这个表单，我在其中收集数据，验证它，一旦验证，我就可以发送它。到目前为止还不错，但我也想保存它，以便通过DNI检索以前的表单。当问题出现时会发生什么。我创建了两个额外的函数，一个用于保存数据，另一个用于恢复表单。问题是，不仅数据没有保存，而且在恢复时，只恢复最后一个表单，而不需要放入DNI，只需放入任何东西，也就是说，假设只有DNI，你可以使用DNI恢复，当你放入一个字母时，整个表单已经被跳过，不应该是这样。

说了这么多，下面是这些函数的Javascript代码和HTML。

function reset(){
form = document.getElementById("formu");
arrall = formu.getElementsByTagName("input");
for(var i=0;i<arrall.length-3;i++){
arrall[i].value = null;
}
var sel = document.getElementsByName("seleccion");
for(var i=0;i<sel.length;i++){
sel[i].checked=false;
if(document.getElementById("desplegar").checked){
var extra = document.getElementById("extra");
extra.parentNode.removeChild(extra);
sel.checked = false;
}
}
var s =document.getElementsByName("sexual");
for(var i=0;i<s.length;i++){
s[i].checked = false;
}
var txtar = document.getElementById("txtdesc");
txtar.value = null;
}
function guardar(){
var guardaNombre = document.getElementById('nombre').value;
var guardaDNI = document.getElementById('dni').value;
var guardaemail = document.getElementById('email').value;
var guardaedad = document.getElementById('edad').value;
var guardasexo = document.getElementById('etsex').value;
var guardatlf = document.getElementById('tlf').value;
var guardaestado_civil = document.getElementById('estado_civil').value;
var guardacookies = document.getElementById('seleccion').value;
var guardadescripcion = document.getElementById('txtdesc').value;
var datos = {
nombre: guardaNombre,
email : guardaemail,
edad: guardaedad,
etsex: guardasexo,
tlf: guardatlf,
estado_civil: guardaestado_civil,
seleccion: guardacookies,
txtdesc: guardadescripcion
}
sessionStorage.setItem(guardaDNI, datos);
}
function recupera(){
console.log("entra");
var guardaDNI = document.getElementById('guardaDNI').value;
if(sessionStorage.getItem(guardaDNI)){
console.log("Pilla el item")
var datos = sessionStorage.getItem(guardaDNI);
console.log(datos.modalidad);
}else{
window.alert("No hay datos del DNI : "+guardaDNI);
document.getElementById('guardaDNI').value = "";
}
}
function mostrar(){
var options = "top = 100, left = 100, width = 800px , height= 900px";
var new_wind;
new_wind = window.open("","info", options);
var nombre = document.getElementById("nombre").value;
var id = document.getElementById("dni");
id.value
var idmsg = "Tu DNI es: "+ document.getElementById("dni").value;
var email = document.getElementById("email").value;
var edad = document.getElementById("edad").value;
var asx = document.getElementsByName("sexual");
var sx;
for(var i=0;i<asx.length;i++){
if(asx[i].checked ){
sx = asx[i].value;
}
}
var tlf = document.getElementById("tlf").value;

var reg = document.getElementById("estado_civil");
var estado_civil = reg.options[reg.selectedIndex].value;
var select = document.getElementsByName("seleccion");
var sel = [];
var seleccion = "";
for(var i=0;i<select.length-1;i++){
if(select[i].checked){
sel.push(select[i].value);
}
}
for(var i=0;i<sel.length;i++){
if(select[5].checked){
if(i<sel.length){
seleccion += sel[i]+", ";
}else if(i==sel.length){
seleccion +=sel[i];
}
}else{
if(i<sel.length){
seleccion += sel[i]+", ";
}else if(i==sel.length-1){
seleccion +=" y "+ sel[i]+".";
}
}
}
if(select.checked){
seleccion +=" y "+ document.getElementById("extra").value+".";
}
var descripcion = document.getElementById("txtdesc").value;
new_wind.document.write("<html><head><link rel='stylesheet' href='style/style.css'></head><body><div id='result'><div id='flote'>"+
"<h1>info:</h1><br><hr>Tu nombre es: "+nombre+"<br>"+idmsg+
"<br>Tu email es: "+email+"<br>Tu sexo es: "+sx +"<br>Tu edad: "+edad+
"<br>Tu teléfono de contacto: "+tlf+
"<br>Su estado civil es: "+estado_civil+"<br>Acepto las cookies: "+seleccion+
"<br>Por último lo que escribio es lo siguiente: "+descripcion+"</div></div></body></html>"
);
}
function recuperar(){
var options = "top = 100, left = 100, width = 800px , height= 900px";
var new_wind;
new_wind = window.open("","info", options);
var nombre = document.getElementById("nombre").value;
var id = document.getElementById("dni");
id.value
var idmsg = "Tu DNI es: "+ document.getElementById("dni").value;
var email = document.getElementById("email").value;
var edad = document.getElementById("edad").value;
var asx = document.getElementsByName("sexual");
var sx;
for(var i=0;i<asx.length;i++){
if(asx[i].checked ){
sx = asx[i].value;
}
}
var tlf = document.getElementById("tlf").value;

var reg = document.getElementById("estado_civil");
var estado_civil = reg.options[reg.selectedIndex].value;
var select = document.getElementsByName("seleccion");
var sel = [];
var seleccion = "";
for(var i=0;i<select.length-1;i++){
if(select[i].checked){
sel.push(select[i].value);
}
}
for(var i=0;i<sel.length;i++){
if(select[5].checked){
if(i<sel.length){
seleccion += sel[i]+", ";
}else if(i==sel.length){
seleccion +=sel[i];
}
}else{
if(i<sel.length){
seleccion += sel[i]+", ";
}else if(i==sel.length-1){
seleccion +=" y "+ sel[i]+".";
}
}
}
if(select.checked){
seleccion +=" y "+ document.getElementById("extra").value+".";
}
var descripcion = document.getElementById("txtdesc").value;
new_wind.document.write("<html><head><link rel='stylesheet' href='style/style.css'></head><body><div id='result'><div id='flote'>"+
"<h1>info:</h1><br><hr>Tu nombre es: "+nombre+"<br>"+idmsg+
"<br>Tu email es: "+email+"<br>Tu sexo es: "+sx +"<br>Tu edad: "+edad+
"<br>Tu teléfono de contacto: "+tlf+
"<br>Su estado civil es: "+estado_civil+"<br>Acepto las cookies: "+seleccion+
"<br>Por último lo que escribio es lo siguiente: "+descripcion+"</div></div></body></html>"
);
}

<body>
<div id="container">
<div id="flote">
<h1>Formulario</h1>
<hr>
<form id="formu" action="">
<table>
<tr>
<td class='labels'><label>Nombre:</label></td>
<td><input id="nombre" type="text" name="nombre"></td>
</tr>
<tr>
<td>
<label name="identificacion" id="identificacion"></label>
<label value="DNI">DNI</label>
</td>
<td><input id="dni" name="dni" type="text"></td>
</tr>
<tr>
<td class='labels'><label>Email: </label></td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td class='labels'><label>Edad: </label></td>
<td><input type="number" name="edad" id="edad"></td>
</tr>
<tr>
<td class='labels' id="etsex">Sexo:</td>
<td><input type="radio" name="sexual" value="Mujer" id="Mujer"><label>Mujer</label></td>
</tr>
<tr>
<td class='labels'><label></label></td>
<td>
<input type="radio" name="sexual" value="Hombre" id="Hombre"><label>Hombre</label>
</td>
</tr>
<tr>
<tr>
<td class='labels'><label>Telefono: </label></td>
<td><input type="text" name="tlf" id="tlf"></td>
</tr>
<tr>
<tr>
<td class='labels'><label>Estado </label></td>
<td>
<select name="estado_civil" id="estado_civil">
<option value="none"> ---- Sin seleccionar ---- </option>
</select>
</td>
</tr><br>
<tr>
<td class='labels'><label id="seleccion">Aceptas las cookies</label></td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="opcion" value="si" id="si"> Si<br>
</td>
</tr>
<tr>
<td class='labels'>Y que piensas del formulario</td>
<td><textarea name="descripcion" id="txtdesc" cols="30" rows="7" placeholder="(min 10 caracteres, max 240 caracteres)"></textarea></td>
</tr>
<tr>
<td class='labels'></td>
<td>
<input disabled type="button" value="Enviar" id="Enviar">
<input type="button" value="Validar" name="validar" id="validar">
<input type="button" value="Borrar" name="borrar" id="borrar">
<input type="button" value="guardar" name="guardar" id="guardar">
</br>
<form id = "formrecuperar" action = "">
Introduzca aquí el DNI para recuperar los datos: <input type = "text" id = "guardaDNI" name = "guardaDNI"></br></br>
<input type = "button" value = "recuperar" name = "recuperar" id = "recuperar">
</form>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>

sessionStorage.setItem()函数适用于字符串，而不是对象。这意味着键和值必须是字符串。将对象转换为字符串的一种简单方法是使用JSON.stringify()，因此：

sessionStorage.setItem(guardaDNI, JSON.stringify(datos));

检索数据后，必须使用JSON.parse():将其转换回对象

datos = JSON.parse(sessionStorage.getItem(guardaDNI));

然后，您可以用检索到的数据填充表单：

document.getElementById('nombre').value = datos.nombre;
document.getElementById('email').value = datos.email ;
document.getElementById('edad').value = datos.edad;
document.getElementById('etsex').value = datos.etsex;
document.getElementById('tlf').value = datos.tlf;
document.getElementById('estado_civil').value = datos.estado_civil;
document.getElementById('seleccion').value = datos.seleccion;
document.getElementById('txtdesc').value = datos.txtdesc;

或者你可以缩短代码：

['nombre', 'email', 'edad', 'etsex', 'tlf', 'estado_civil', 'seleccion', 'txtdesc'].forEach(function(key) {
document.getElementById(key).value = datos[key];
})

据我所知，您希望保存表单数据，并在以后出于某种目的进行恢复。如果您想在本地存储数据，那么您可能希望在提交表单时将数据存储在localStorage中，也可以在需要时从localStorage恢复表单数据。

要在本地存储中存储数据，格式如下(下一行将数据保存在浏览器的本地存储中，名称为formData.

localStorage.setItem("formData",JSON.stringify(<form data>))

您可以使用下面的片段从本地存储获取数据

localStorage.getItem("formData")

上面的行将获得存储在formData变量中的数据。

相关内容

最新更新

热门标签：