想要将显示/隐藏脚本设置为默认可见

Question

i want to set a show/hide js script that is using localstorage on by default.

$(document).ready(function () {
  var sidebarVisible = localStorage.getItem('sidebar') == 'true';
  $('#sidebar').toggle(sidebarVisible);
  $('.bgcontainer_center').toggleClass('clicked', sidebarVisible);

  $("#toggle").click(function () {
    $("#sidebar").toggle("slow", function () {
      localStorage.setItem('sidebar', $('#sidebar').is(':visible'));
    });

    $(".bgcontainer_center").toggleClass('clicked');
  });
});

This is the link to it https://jsfiddle.net/eo12xw79/67/

I can't seem to find how to set it on by default.

Answer 1

The reason it isn't toggled is because the sidebar key isn't present in the browser's localstorage the first time we visit the page.

There is a very simple solution, just have to check if the sidebar key exists in the localstorage and if not, create it.

$(document).ready(function () {

    // BEGIN
    if(!localStorage.getItem('sidebar')) {
        localStorage.setItem('sidebar', 'true');
    }
    // END

    var sidebarVisible = localStorage.getItem('sidebar') == 'true';
    $('#sidebar').toggle(sidebarVisible);
    $('.bgcontainer_center').toggleClass('clicked', sidebarVisible);

    $("#toggle").click(function () {
        $("#sidebar").toggle("slow", function () {
            localStorage.setItem('sidebar', $('#sidebar').is(':visible'));
        });

        $(".bgcontainer_center").toggleClass('clicked');
    });
});

EDIT : I think it's useless, why ?
Because you will use the localstorage for a single variable that has no real importance.
After, this is only a personal opinion, it depends on your needs.

DUPLICATE : How to check whether a Storage item is set?