0

Buen día, actualmente genero un listado de cupones dinamicamente de la siguiente forma:

var cupones_bienvenida = $('.cupones_bienvenida');
                        var tipoCupon ='';

                        $.each(response.data, function (i) {
                            if (response.data[i].Sub_Tipo == 1){
                                tipoCupon = "Cupón 1";
                            }
                            else if(response.data[i].Sub_Tipo == 2){
                                tipoCupon = "Cupón 2";
                            }
                            else{
                                tipoCupon = "Cupón 3";
                            }


                              $('<tr class="cupones"/>')
                                    .append($('<td/>').addClass('nuevo-td td-cuponera-costarica')
                                        .append($('<label/>').addClass('label-checkbox item-content').text(response.data[i].Nombre)))
                                    .append($('<td/>').addClass('label-cell nuevo-td').append($('<p class="td-parrafor-cupcostarica"/>').text(tipoCupon))
                                        .append($('<p class="td-parrafor-cupcostarica"/>').text("Descuento: "+response.data[i].Descuento)))


                                    .append('<div class="cod_cupon" style="display:none">' + response.data[i].Identificador + '</div>')
                                    .append('<div class="descuento_cupon" style="display:none">' + response.data[i].Descuento + '</div>')
                                    .append('<div class="tipo_cupon" style="display:none">' + response.data[i].Tipo_cupon + '</div>')
                                    .append('<div class="sub_tipo" style="display:none">' + response.data[i].Sub_Tipo + '</div>')
                                    .append('<div class="vencimiento" style="display:none">' + response.data[i].Fecha_vence + '</div>')

                                    .append($('<td/>').addClass('label-cell nuevo-td')
                                                .append($('<label/>').addClass('label-checkbox item-content')
                                                            .append('<input type="checkbox" name="cupon_check" class="cupon_check" value="' + response.data[i].Identificador + '"/>')
                                                            .append($('<span/>').addClass('item-media').append('<i class="icon icon-form-checkbox"></i>'))))
                                    .appendTo(cupones_bienvenida);
                             if (cantidad_llaves === 0) {
                                $('.cupon_check').prop('disabled', true)
                            }

                            });

$('.cupones_bienvenida').on('click','.cupon_check', function(e){
        //Aca obtengo los valores del listado dinamico
    });

Resulta que al seleccionar los checkbox

introducir la descripción de la imagen aquí

Todo me trabaja bien, el detalle surge cuando realizo un cambio de vista, por ejemplo me encuentro en 'pagina/cupones.html' y luego al irme a otra vista como 'pagina/principal.html', al regresar a cupones.html la informacion seleccionada se ha borrado.

Entonces pretendo generar un json con la informacion del listado de cupones. Pero tengo la duda como debe ir estructurado este json y luego como volver a cargar este json a la lista para que la información no se vea afectada, es decir solo se guarde temporalmente.

1 respuesta 1

0

Puedes utilizar la propiedad localStorage para almacenar el valor de tus inputs y setearlos cada vez que cargas tu html.

De esta forma, para guardar el valor de tus checksbox:

function guardar(){
    var checkbox1 = document.getElementById('checkbox1');
    var checkbox2 = document.getElementById('checkbox2');
    //...
    if(checkbox1.checked) {
        localStorage.setItem('checkbox1', 1);
    }
    if(checkbox2.checked){
        localStorage.setItem('checkbox2', 1);
    }
    //...
}

para setearlos de nuevo en el HTML:

function leer(){    
    var checkbox1 = JSON.parse(localStorage.getItem('checkbox1'));
    var checkbox2 = JSON.parse(localStorage.getItem('checkbox2'));

    if (checkbox1 == "1") {
        document.getElementById("checkbox1").setAttribute('checked','checked');
    }
    if (checkbox2 == "1") {
        document.getElementById("checkbox2").setAttribute('checked','checked');
    }
}

Entonces, al momento de moverte entre vistas ejecutas guardar() para guardar el estado actual de los checkbox y leer() para setearlos cada vez que se carga un HTML. Puede quedar algo así:

<html>
<script>

function guardar(){
        var checkbox1 = document.getElementById('checkbox1');
        var checkbox2 = document.getElementById('checkbox2');
        //...
        if(checkbox1.checked) {
            localStorage.setItem('checkbox1', 1);
        }
        if(checkbox2.checked){
            localStorage.setItem('checkbox2', 1);
        }
        //...
    }
}
function leer(){    
        var checkbox1 = JSON.parse(localStorage.getItem('checkbox1'));
        var checkbox2 = JSON.parse(localStorage.getItem('checkbox2'));

        if (checkbox1 == "1") {
            document.getElementById("checkbox1").setAttribute('checked','checked');
        }
        if (checkbox2 == "1") {
            document.getElementById("checkbox2").setAttribute('checked','checked');
        }
    }
function pasarAOtroTab(){
    guardar();
    window.location.assign("otraPagina.html");
}

function destroy(){
location.reload();
localStorage.clear();
}

</script>

<body onload="leer();">

<input type="checkbox" id="checkbox1">1e film van de dag</input>
<input type="checkbox" id="checkbox2">1e film van de dag</input>
<button onclick="pasarAOtroTab();">Otro Tab</button>
<button onclick="destroy();">Limpiar localStorage</button>
</body>

</html>

Hay formas más directas de hacer este control, pero lo dejo lo más simple para que se entienda más rápido.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.