como dice en el titulo tengo un programa que valida los datos de un formulario y una vez validados los guarda en un array, el problema surge cuando una vez validados los datos se creará un objeto de nombre vehiculo con estos datos y este objeto se irá almacenando en un array de vehículos dentro del sessionStorage, la cual por mas que lo intente no soy capaz de almacenar los datos en el sessionStorage. El key debe llamarse “misVehículos” y su valor será un array con todos los vehículos insertados hasta el momento, no entiendo como hacer que el key sea misVehículos y pasarle el array.
Ademas si la matrícula del vehículo ya existe mostraremos un mensaje y el usuario deberá modificar dicha matrícula para poder guardarla en el array, cosa que no tengo muy claro como comprobar.
Dicho esto aquí paso el código que llevo hasta el momento.
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="mensaje.js"></script>
<title>Document</title>
</head>
<body>
<form id="f1">
<fieldset>Concesionario</fieldset>
<p><label for="Matricula">Matricula: <input type="text" id="c1"></label></p>
<p><label for="tipo_de_vehiculo">Tipo de vehiculo: <input type="text" id="c2"></label></p>
<p><label for="anyomatriculacion">Año de matriculacion: <input type="text" id="c3"></label></p>
</form>
<input type="button" id="guardar" value="Guardar">
<input type="button" id="buscar" value="Buscar" disabled>
</body>
</html>
javascript:
window.onload = function () {
document.getElementById('guardar').onclick = guardar;
}
function Concesionario(matricula, tipo_vehiculo, anyomatriculacion) {
this.matricula = matricula;
this.tipo_vehiculo = tipo_vehiculo;
this.anyomatriculacion = anyomatriculacion;
}
var concesionario = new Array();
debugger;
function validar() {
var valid = true;
var error = '';
var matricula = new RegExp("^[A-Z]{2}\\d{4}-[A-Z]{3}$");
var valormatricula = document.getElementById('c1').value;
if (!matricula.test(valormatricula)) {
if (valid) {
document.getElementById('c1').focus();
}
valid = false;
error += 'Erro en la matricula Matrícula del vehículo que tenga el formato: << LLNNNN-LLL >> donde L es una letra mayúscula y N un número del 0 al 9.\n ';
}
var tipo_vehiculo = new RegExp("^(Coche|coche|COCHE|moto|Moto|MOTO|camion|Camion|CAMION)$");
var valortipo_vehiculo = document.getElementById('c2').value;
if (!tipo_vehiculo.test(valortipo_vehiculo)) {
if (valid) {
document.getElementById('c1').focus();
}
valid = false;
error += 'Error en el tipo de vehiculo, los valores son << coche, moto o camión>> Tened en cuenta que los datos pueden ser insertados en mayúsculas o minúsculas y ambos serán válidos.\n ';
}
var anyomatriculacion = new RegExp("^([2][0][1][0-9])|([2][0][2][0-2])$");
var valoranyomatriculacion = document.getElementById('c3').value;
if (!anyomatriculacion.test(valoranyomatriculacion)) {
if (valid) {
document.getElementById('c3').focus();
}
valid = false;
error += 'Fecha incorrecta de 2015 a 2021\n';
}
if (valid) {
alert('Los datos son validos');
//document.getElementById("f1").reset();
document.getElementById('buscar').disabled = false;
//document.getElementById('recuperar').disabled = false;
} else {
document.getElementById('buscar').disabled = true;
// document.getElementById('recuperar').disabled = true;
alert('Revise el formulario\n\n' + error);
}
return valid;
}
debugger;
function guardar() {
debugger;
if (validar()) {
var valormatricula = document.getElementById('c1').value;
var valortipo_vehiculo = document.getElementById('c2').value;
var valoranyomatriculacion = document.getElementById('c3').value;
var coche = new Concesionario(valormatricula, valortipo_vehiculo, valoranyomatriculacion);
var enc = false;
for (var i = 0; i < concesionario.length && !enc; i++) {
var coche = concesionario[i];
if (coche.matricula === valormatricula) {
enc = true;
}
}
if (!enc) {
concesionario.push(coche);
console.log(concesionario);
concesionario.forEach(datoscoches => {
sessionStorage.setItem("misVehiculos", JSON.stringify(datoscoches));
console.log(concesionario);
});
document.getElementById("f1").reset();
} else {
alert('El coche con la matricula ' + valormatricula + ' ya existe.');
}
}
}
undefined
:JSON.stringify(datoscoches.concesionario))
. ¿No será que quieres poner unJSON.stringify(datoscoches))
?datoscoches.misVehiculos
? Pues en el setItem encierrala entre apostrofes o comillas, es decir, así:sessionStorage.setItem('datoscoches.misVehiculos',JSON.stringify(datoscoches));
y luego lo puedes recuperar consessionStorage.getItem("datoscoches.misVehiculos");
getItem
asignandolo a una variable y parseando el JSON con JSON.parse creo, luego a esa variable le agregas los nuevos datos, y finalmente vuelves a sobreescribir la key del sessionStorage con el JSON.stringify de la nueva variable. No se si me explico o no se me entiende.