0

quiero mantener el color del onClick así como el href, que hasta que borras caché vuelve a su color original, con mi código le pico a un TD de mi tabla y este se pinta, pero una vez que salgo de la pagina se quita y tengo que volver a darle, ¿existe alguna forma?

<script>$(document).ready(function () {
    $('td').click(function () {
        if(this.style.background == "" || this.style.background =="white") {
            $(this).css('background', '#green');
        }
        /*else {
            $(this).css('background', 'white');
        }*/
    });
});
</script>
2
  • Hola, tendrías que usar cookies (aunque borrando el caché sucedería lo mismo) entonces una propuesta es usar bases de datos para almacenar que el usuario ha hecho clic.
    – Diego
    Commented el 17 jun. 2020 a las 22:15
  • ¿como lo haces con cookies @Diego ?
    – miiwtwo
    Commented el 17 jun. 2020 a las 22:19

1 respuesta 1

0

Bienvenido a la comunidad StackOverflow.

Con respecto a tu pregunta es posible realizarlo a través de cookies (aunque estás son de forma temporal y cuando se borre el caché sucedería lo mismo que planteas)

Puedes usar las siguientes funciones:

function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

Y la parte que detecta el clic del usuario quedaría de la siguiente manera:

$(document).ready(function () {
    if(getCookie('color') == null)
    {
        $(this).css('background', 'white');
    }
    else
    {
        $(this).css('background', getCookie('color'));
    }
    $('td').click(function () {
        
        if(this.style.background == "" || this.style.background =="white") {
            $(this).css('background', 'green');
            setCookie('color','green',30); //Establecemos la cookie por 30 días
        }
        /*else {
            $(this).css('background', 'white');
        }*/
    });
});

Referencias: Set cookie and get cookie with JavaScript

Al final tu script debería quedar de la siguiente forma:

<script>
function setCookie(name,value,days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
$(document).ready(function () {
    if(getCookie('color') == null)
    {
        $(this).css('background', 'white');
    }
    else
    {
        $(this).css('background', getCookie('color'));
    }
    $('td').click(function () {
        
        if(this.style.background == "" || this.style.background =="white") {
            $(this).css('background', 'green');
            setCookie('color','green',30); //Establecemos la cookie por 30 días
        }
        /*else {
            $(this).css('background', 'white');
        }*/
    });
});
</script>
2
  • groso!!!, solo que no funciono diego :$ pinta pero de nuevo al cerrar y volver abrir tengo que volver a pintarlo, no he borrado cache, ¿habrá algo mas que mover y si puedes poner también con base de datos?
    – miiwtwo
    Commented el 17 jun. 2020 a las 23:10
  • sigue sin funcionar, le he cambiado líneas, pero no guarda el color 🤷🏻‍♂️
    – miiwtwo
    Commented el 19 jun. 2020 a las 13:49

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.