Question 37257 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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>
Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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", "")

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search