onClick hide/show after page refreshed

Question

is there a way, that JQuery remembers the settings after the page was refreshed. Example if I click the button, the color turns blue and the text which is in the table get hidden (this works perfectly) But after I fresh the page it turned back to red and text is showing again => expected behavior

any suggestions how I can improve the script that the div have still same satus after the page was refreshed? I’m bit lost here.. thank you for the help.

 function shHide (elementid,buid){
    if (document.getElementById(elementid).style.display == 'none'){
      $("#"+elementid).slideDown(250);
      document.getElementById(buid).style.backgroundColor='red';
      document.getElementById(buid).title=document.getElementById(buid).title.replace('show','hide');
    } else {
        $("#"+elementid).slideUp(450);
        document.getElementById(buid).style.backgroundColor=’blue’;
        document.getElementById(buid).title=document.getElementById(buid).title.replace('hide','show');
        }

<div id="test" class="mdiv" onClick="shHide('testdiv', mdiv);" title="hide">test1123</div>

script variables and the `DOM` are going to be reset upon the refresh of the page. You have multiple options, 1. Store the settings server side and get them upon page load. 2. Use session storage client side. 3. Use local storage client side. Personally, I'd go for 2. or 3. depending on if you want these to persist past the end of a browser session. You can read more about local/session storage here: [html5-local-storage-vs-session-storage](https://stackoverflow.com/questions/5523140/html5-local-storage-vs-session-storage) P.S. - Your code snippet throws an error. — Ryan Wilson, Mar 22 '21 at 17:54
@RyanWilson, thank you for the update, it shows an error because i have not put the whole table and in this case is not relevant. I checked the link you sent.. thank you, is bit difficult to understand the logic behind it. as you have more experience in this may i ask you to provide me an example based on the logic i have above ? — James, Mar 23 '21 at 12:01
Inside your function, you'd just store some kind of boolean or JSON.stringify an array of key/value pairs, like the element selector and true/false as it's value to determine whether it's shown or hidden. You'd place this in sessionStorage or localStorage, and when the page is refreshed, you'd check whichever appropriate storage location for the object, if it exists, you'd set the elements to shown/hidden respectively. — Ryan Wilson, Mar 23 '21 at 12:16
thank you Ryan, but it doesn't work, looks like i do something wrong. i tried several scenarios which 'localStorage.setItem ect. but i do not got it. but thx. for the help — James, Mar 24 '21 at 00:00

score 0 · Answer 1 · answered Mar 22 '21 at 17:57

0

you can use cookies developers usually use cookies in back end not the front end but you can use cookies in jquery too, search about it you will use it alot you can begin with this 3 minutes video https://youtu.be/ylbWDYN_r0o

answered Mar 22 '21 at 17:57

Ahmed Marouf

1
1

1

Perhaps an example of using cookies in context would be helpful here to the original poster? – Ralph King Mar 22 '21 at 19:00

Ryan Wilson · Answer 2 · 2021-03-24T15:54:18.700

@James, You said you tried to do what I suggested, so I'm going to give you an example here as an answer in hopes it will clarify things and help you with your attempt, this doesn't really work as a snippet since the site sandboxes the document in the snippet, but this gives you an idea of how to do this, also, the function is just taking a null on the second value since I'm unsure of what else you need to do in your function. But you can modify this and it should give you all you need to implement as a solution:

 //On load of DOM, check if localStorage has items to hide
 document.addEventListener("DOMContentLoaded", function(){
     if(localStorage.getItem("hiddenElements") !== null){
         let hiddenEls = JSON.parse(localStorage.getItem("hiddenElements"));
         for(let a = 0; a < hiddenEls.length; a++){
             if(hiddenEls[a].hidden){
                document.getElementById(hiddenEls[a].id).classList.add('hidden');
             }
         }      
     }
});


//get elements to add click event
const items = document.getElementsByClassName('test');

//iterate the elements to add click events
for(let z = 0; z < items.length; z++){
   items[z].addEventListener('click', () => shHide(items[z].id, null));
}

//Modify as necessary
function shHide (elementid,buid){
    const myel = document.getElementById(elementid);
    
    let hidden = false;
    if(myel.classList.contains('hidden')){
       myel.classList.remove('hidden');
    }else{
       myel.classList.add('hidden');
       hidden = true;
    }
    
    if(localStorage.getItem("hiddenElements") !== null){
       let hiddenEls = JSON.parse(localStorage.getItem("hiddenElements"));
       if(hiddenEls.filter(a => a.id === elementid).length){
          const foundIndex = hiddenEls.findIndex(x => x.id === elementid);
          items[foundIndex].hidden = hidden;
       }else{
          hiddenEls.push({id: elementid, hidden: hidden});
       }
       
       localStorage.setItem("hiddenElements", JSON.stringify(hiddenEls));
    }else{
       localStorage.setItem("hiddenElements", JSON.stringify([{id: elementid, hidden: hidden}]));
    }
}

.test {
  display: block;
  color: blue;
  cursor: pointer;
}

.hidden {
  /*display: none;*/
  color: red;
}

<div class="row">
<div class="col-3">
   <span id="spntest" class='test'>
       Some Example Text
   </span>
</div>
</div>

onClick hide/show after page refreshed

2 Answers2