How to make the remove icon not change to the add icon when I reload the page in LocalStorage?-CodePudding

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()"  id="add"></i>
  <i onclick="Removefav()"  id="remove"></i>


</body>
</html>

CodePudding user response：

I would set a cookie, that status change when someone click the button, and then onl oad 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

CodePudding user response：

To resolve this, add the following code before the declaration of your functions.

if (localStorage.getItem('favn1') == "") {

    boton_remove = document.getElementById("remove")
    boton_remove.style.display = "none"

    boton_add = document.getElementById("add")
    boton_add.style.display = "block"

} else {

    boton_add = document.getElementById("add")
    boton_add.style.display = "none"

    boton_remove = document.getElementById("remove")
    boton_remove.style.display = "block"
}

And instead of localStorage.removeItem("favn1"), put localStorage.setItem("favn1", "")