How to apply sessionStorage or localStorage in code

Question

How to apply sessionStorage or localStorage in code

Navigation

#1 by (1 votes)

1

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>

Basically it is a floating menu for a virtual store platform. It turns out it is working normally but I added two toggle buttons to hide and show that floating menu. But when reloading the page if the client had hidden it it returns appearing. The truth would be to remain hidden.

How to proceed galera?

php javascript jquery localstorage

asked by anonymous 21.05.2017 / 07:46

1 answer

How to use SelniunHQ to fill out forms with php? Atom does not save in correct encoding

score 1 · Accepted Answer

I used sessionStorage yesterday in a project of mine. I'll do it for you quite simply.

To put a value in the sessioStorage, we use sessionStorage.setItem('nome', 'valor'); and, to get 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 on my cell phone. I hope everything is ok!