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

Question

我想设置默认情况下使用localstorage的show / hide js脚本。

$(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');
  });
});

这是链接到它https://jsfiddle.net/eo12xw79/67/

我似乎找不到默认设置。

Answer 1

之所以没有切换，是因为我们第一次访问该页面时，浏览器的localstorage没有sidebar键。

有一个非常简单的解决方案，只需检查sidebar密钥是否在localstorage ，如果不存在，则创建它。

$(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');
    });
});

编辑：我认为这没用，为什么？
因为您将对没有真正重要性的单个变量使用localstorage 。
之后，这只是个人观点，取决于您的需求。

重复： 如何检查是否设置了存储项目？