button click Local Storage-CodePudding

first time caller.

I have this button that when clicked, it expands a class to reveal content but when page refreshes or leave the page and come back, it closes again. I would like for the user when clicked, it stays opened at all times until such user closes it manually by this button.

Ideally, local storage is the way to go but I lack experience on this matter.

This is what I got...

the button...

<div class="open_child"><i class="fas fa-plus-circle"></i></div>

...and a simple js.

           $("document").ready(function () {
            $(".open_child").click(function(z){
            $(".child_box").toggle(z);
                    });
        })

.child_box is what is hidden until revealed.

Responses much appreciated.

CodePudding user response：

you may try this in html what you have already just use the class manualclose for manual in js part

      ls = localStorage.getItem('on')
      if(ls){
        $(".child_box").show()
      }

      $(".open_child").click(function(z){
          localStorage.setItem('on',true)
          toggled = $(".child_box").toggle();
          if(toggled.is(":hidden")){
            localStorage.clear();
          }
      });
      $(".manualclose").click(function(z){
        localStorage.clear();
        $(".child_box").hide()

      });
   })