How to apply sessionStorage or localStorage in code

Question

I’m using the following code:

<script type="text/javascript">
    $(window).scroll(function() {
    if ($(this).scrollTop() > 300){  
    $('.float-menu-fixed').removeClass("closed");
    $('.float-menu-fixed').addClass("visible");
}
else{
    $('.float-menu-fixed').addClass("closed");
    $('.float-menu-fixed').removeClass("visible");
}
});
  </script>

<script type="text/javascript">
$(document).ready(function() {
    $("#float-open").click(MostrarDiv);
    $("#float-close").click(OcultarDiv);
});
function MostrarDiv(){
    $('.float-menu-content').css('display', 'block');
    $('#float-close').css('display', 'none');
    $('#float-open').css('display', 'none');
    $('#float-close').css('display', 'block');

}
function OcultarDiv(){
    $('.float-menu-content').css('display', 'none');
    $('#float-close').css('display', 'none');
    $('#float-open').css('display', 'block');
}

</script>




<div class="float-menu-fixed">
<div class="float-menu">
        <div class="float-menu-content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-2">
                        <div id="logo-float-menu">
                            <?php if ($logo) { ?>
                            <a href="<?php echo $home; ?>"><img src="<?php echo $logo; ?>" title="<?php echo $name; ?>" alt="<?php echo $name; ?>" class="img-responsive" /></a>
                            <?php } else { ?>
                            <h1><a href="<?php echo $home; ?>"><?php echo $name; ?></a></h1>
                            <?php } ?>
                        </div>
                    </div>

                    <div class="col-sm-5">
                        <div id="search-float">
                            <div id="new-search" class="input-group">
                                <input type="text" name="new-search" value="" placeholder="O que procura" class="form-control input-lg" />
                                    <span class="input-group-btn">
                                        <button type="button" class="btn-search-header"><i class="fa fa-search"></i></button>
                                    </span>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-3">
                        <div class="call-center">
                            <div class="atendimento">
                                <small><?php echo $text_call; ?></small>
                                <span><?php echo $text_center; ?></span>
                            </div>
                            <ul class="dropdown-menu hover-contact">
                                <li><i class="fa fa-phone" style="margin-right:6px;font-size: 18px;"></i> (38) 3613-1414</li>
                                <li><i class="fa fa-phone" style="margin-right:9px;font-size: 18px;"></i>(38) 99141-9842</li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-sm-2">
                        <div id="cart-float">
                            <?php echo $cart; ?>
                        </div>
                    </div>

                </div>
            </div>    


        </div>
    <div id="float-close"></div>
    <div id="float-open"></div>
</div>

It’s basically a floating menu for a virtual store platform. Turns out it’s working normally, but I added two toggle buttons to hide and show this floating menu. However when reloading the page if the customer had hidden it he comes back appearing. The right thing would be to remain hidden.

How to proceed, guys?

Answer 1

I used sessionStorage yesterday on a project of mine. I will make it for you in a very simple way.

To put a value in sessioStorage, we use sessionStorage.setItem('nome', 'valor'); and, to take this value, we use sessionStorage.getItem('nome');

Let’s go to the code:

<script type="text/javascript">
    $(window).scroll(function() {
    if ($(this).scrollTop() > 300){  
    $('.float-menu-fixed').removeClass("closed");
    $('.float-menu-fixed').addClass("visible");
}
else{
    $('.float-menu-fixed').addClass("closed");
    $('.float-menu-fixed').removeClass("visible");
}
});
  </script>

<script type="text/javascript">
$(document).ready(function() {
    $("#float-open").click(MostrarDiv);
    $("#float-close").click(OcultarDiv);
});
function MostrarDiv(){
    $('.float-menu-content').css('display', 'block');
    $('#float-close').css('display', 'none');
    $('#float-open').css('display', 'none');
    $('#float-close').css('display', 'block');
sessionStorage.setItem('mostrardiv', 'verdadeiro');
}
function OcultarDiv(){
    $('.float-menu-content').css('display', 'none');
    $('#float-close').css('display', 'none');
    $('#float-open').css('display', 'block');
 sessionStorage.setItem('mostrardiv', 'falso');    }

</script>
      <script type="text/javascript">
         $(document).ready(function() {
          var mostrardiv = sessionStorage.getItem('mostrardiv');
if (mostrardiv == 'falso') {
$('.float-menu-content').css('display', 'none');
        $('#float-close').css('display', 'none');
        $('#float-open').css('display', 'block');
    }
});
</script>

I did it by cell phone. I hope everything is ok!