I have two icons, one to add and one to remove
function FavId() {
// localStorage.setItem("favn1", "<a href='/details/title'><img src='https://images.unsplash.com/photo-1659560893497-bb094425bd21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1498&q=80'></a>");
boton_add = document.getElementById("add");
boton_add.style.display = "none";
boton_remove = document.getElementById("remove");
boton_remove.style.display = "block";
}
function Removefav() {
// localStorage.removeItem("favn1");
boton_remove = document.getElementById("remove");
boton_remove.style.display = "none";
boton_add = document.getElementById("add");
boton_add.style.display = "block";
}
body {
background-color: black;
}
i {
font-size: 50px;
color: white;
cursor: pointer;
}
#remove {
display: none;
}
<!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">
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css'>
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css'>
<title>Fav 1</title>
</head>
<body>
<i onclick="FavId()" class="fi fi-rr-add" id="add"></i>
<i onclick="Removefav()" class="fi fi-sr-cross-circle" id="remove"></i>
</body>
</html>
, as you know the add icon is the default icon when launching the page, basically what I want is when I click the "add" icon it becomes "delete" but that the delete icon is there when I reload or closes the page, unless you click remove (then it would be the add icon).
here an example of what I want.
PS: I don't want to use cookies for this
To do what you want you'll need to use a persistent value between sessions. Since you don't want to use cookies, the most logical option, I think, is to use local storage.
Modify your functions to store the current state locally
And in the HTML call the CheckEstado function when the page is loaded, for example
Basically what it does is that every time you change the state of the button, it is stored in localStorage. When the page is loaded, the state is read from the localStorage and depending on its value one button or another is activated calling the corresponding function.