I have two icons, one to add and one to remove, as you know the add icon is the default icon when starting the page, basically what I want is that when I click the "add" icon it becomes "remove", but that the remove icon is there when you reload or close the page, unless you click remove (then it would be the add icon).
here an example of what I want. IMAGE
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>
2
Answers
I would set a cookie, that status change when someone click the button, and then onLoad check if the value of the cookie == clicked / not clicked.
here you have good example: https://www.w3schools.com/js/tryit.asp?filename=tryjs_cookie_username
To resolve this, add the following code before the declaration of your functions.
And instead of
localStorage.removeItem("favn1")
, putlocalStorage.setItem("favn1", "")