Change the color of a button and keep it changed after the user leaves and returns

Question

Is there any way to get a page to keep the color change of a button (or link) with a function like the CSS "a:visited", but this change should remain even after the user leaves the site and returns afterwards?

Answer 1

Since what you want to do does not involve security issues, you just want to change the style of a button, you can use localStorage Javascript, which works as a cookie.

The localStorage stores information in the browser in a variable that can be retrieved at any time, and that information is not erased when leaving the site or when the browser is closed.

Defining a localStorage

You can create directly using the syntax:

localStorage.botao = "algum_valor";

Where botao is the name given to localStorage and algum_valor is the value of it. You can put a specific value that can be used later or simply set true, only to indicate that it exists:

localStorage.botao = true;

It is worth remembering that when putting localStorage.botao = false; won’t do you any good for checking boolean, that is to say, localStorage.botao = true; and localStorage.botao = false; will return true in if(localStorage.botao). That’s because nay if you are verifying its value, but if he exists.

Getting back to thinking...

Assuming you own 2 class in your CSS, one for each button color:

.botao_vermelho{
    background: red;
}

.botao_verde{
    background: green;
}

By changing the color of the red for green and wants the user to always have the button green when returning to the site, create the localStorage.botao = true; and enter in your code the check below:

$(document).ready(function(){
    var button = $("#id_do_botao"); // pego o botão pelo id
    if(localStorage.botao){ // verifico se o localStorage "botao" existe

        // removo a class vermelho e adiciono a verde
        button.addClass("botao_verde")
        .removeClass("botao_vermelho");
    }
});

Removing the localStorage

Once created, the localStorage no expiration date. It will only be deleted via browser option if it is uninstalled or by the instruction below:

localStorage.removeItem("botao");

So when you no longer need it, enter the line above in the part of your code where you want to do this.