1 votos

Guardar cambios por JS en el DOM ASP.NET

Buenas, hace poco mas de 3 meses que estoy codeando, y me encuentro en una encrucijada.

Estoy tratando de adaptar un template que encontré por ahí (FotoHunter) y convertirlo en un app en ASP.NET.

El template tiene un scrip en js (anda a saber cual son como 7 archivos), que cambia el aspecto visual de la pagina, mas que nada los colores. Hasta ahí todo bien, solo que cambia en el cliente y ese cambio no se almacena, si se actualiza la pagina queda con la configuración inicial.

Acá vienen las preguntas: ¿es posible almacenar ese cambio?, de ser así ¿debo hacerlo en una base de datos?

Gracias desde ya y espero haber sido suficientemente claro.

EDIT: agrego un poco de código así queda un poco mas claro, igualmente estoy investigando como usar el local storage.

Este es el que picker: ` <!-- COLOR PICKER --> <div class="color-picker">

    <div class="picker-btn"></div>
    <div class="pickerTitle">Style Switcher</div>
    <div class="pwrapper">
        <!--  BACKGROUND  -->
        <div class="pickersubTitle"> Background scheme </div>
        <div data-color="white" class="picker-white bg"></div>
        <div data-color="black" class="picker-black bg"></div>
        <div class="clear nopick"></div>
        <!--  //BACKGROUND  -->
        <br><br><br>
        <!--  COLOR  -->
        <div class="pickersubTitle"> Color scheme </div>
        <div data-color="turquoise" class="picker-turquoise color"></div>
        <div data-color="purple" class="picker-purple color"></div>
        <div data-color="pink" class="picker-pink color"></div>
        <div data-color="green" class="picker-green color"></div>
        <div data-color="yellow" class="picker-yellow color"></div>
        <div data-color="red" class="picker-red color"></div>
        <div data-color="blue" class="picker-blue color"></div>
        <div data-color="lightgreen" class="picker-lightgreen color"></div>
        <div data-color="lightred" class="picker-lightred color"></div>
        <div class="clear nopick"></div>
        <!--  //COLOR  -->
    </div>
</div>
<!--  //COLOR PICKER  --> `

Y esta es la funcion JS que hace que funcione (valga la redundancia) :

   /*----------  SWITCH COLOR  ----------*/
    if($('.picker-btn').length){
        $('.picker-btn').on('click', function(){
            if(parseInt($('.color-picker').css('right')) == 0){
                $('.color-picker').stop().animate({'right': -160}, 500);
            }else{
                $('.color-picker').stop().animate({'right': 0}, 500);
            }
        });
        $('.color-picker .pwrapper div.color').on('click', function(){
            $('body').removeClass('lightgreen blue green lightred red yellow turquoise pink purple');
            $('body').addClass($(this).attr('data-color'));
        });
        $('.color-picker .pwrapper div.bg').on('click', function(){
            $('body').removeClass('white black');
            $('body').addClass($(this).attr('data-color'));
            if($(this).attr('data-color') == 'black'){
                $('#clientLogo img').each(function(){
                    var src = $(this).attr('src');
                    $(this).attr('src', src.replace(/clients\//,'clients/black-'))
                })
            }else{
                $('#clientLogo img').each(function(){
                    var src = $(this).attr('src');
                    $(this).attr('src', src.replace(/clients\/black-/,'clients/'))
                })
            }
        });
    }
    /*----------  //SWITCH COLOR  ----------*/

No pongo las clases de CSS porque creo que ya no es necesario, de mas esta decir que no hice yo esta funcion.

Ahora la cuestión es, como guardo la ultima clase asignada. es solo eso, guardando la clase que se le asigna al body ya estaría.

0 votos

Funciono Ivan! Muchas Gracias!

0 votos

De nada, cualquer otra duda pregunta.

2voto

Ivan Muñoz Puntos 1120

Buenas tardes,

Si es posible, y no es necesario que sea es una base de datos, podría ser en cookies o por local storage, si quieres mas ayuda pon algo de tu código asi podremos saber que necesitas exactamente.

Saludos

Ivan muñoz

1voto

Ivan Muñoz Puntos 1120

Buenas tardes,

Creo que con esto te servira:

//Al iniciar comprobamos si hay una class guardada en local storage 
if(localStorage.getItem('bodyClassName') != null)
{
    //Si hay una class se la asignamos a body
    $('body')[0].className = localStorage.getItem('bodyClassName')
}

if($('.picker-btn').length){
    $('.picker-btn').on('click', function(){
        if(parseInt($('.color-picker').css('right')) == 0){
            $('.color-picker').stop().animate({'right': -160}, 500);
        }else{
            $('.color-picker').stop().animate({'right': 0}, 500);
        }
    });
    $('.color-picker .pwrapper div.color').on('click', function(){
        $('body').removeClass('lightgreen blue green lightred red yellow turquoise pink purple');
        $('body').addClass($(this).attr('data-color'));
        //Aca se setea el local storage
        localStorage.setItem('bodyClassName', $('body')[0].className);

    });
    $('.color-picker .pwrapper div.bg').on('click', function(){
        $('body').removeClass('white black');
        $('body').addClass($(this).attr('data-color'));
        //Aca setea el local storage
        localStorage.setItem('bodyClassName', $('body')[0].className);

        if($(this).attr('data-color') == 'black'){
            $('#clientLogo img').each(function(){
                var src = $(this).attr('src');
                $(this).attr('src', src.replace(/clients\//,'clients/black-'))
            })
        }else{
            $('#clientLogo img').each(function(){
                var src = $(this).attr('src');
                $(this).attr('src', src.replace(/clients\/black-/,'clients/'))
            })
        }
    });
}

Avisa si te sirvio

Saludos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: