Question

我试图让div关闭，直到有人点击它，然后记住它是打开还是关闭。这是我到目前为止所做的：

<input id="chk1" type="button" value="Click here"/>

<div id="box1" style="display:none">
    <!-- HTML STUFF HERE -->
</div>

<script>
    jQuery.noConflict();
    jQuery(document).ready(function($) {
      $('#chk1').click(function() {
        $('#box1').slideToggle('200'); 
        localStorage.setItem('show', 'true');
      });
    });
</script>

它有效但除了它不记得div打开/关闭状态。

如果可能的话，我想在不添加任何脚本的情况下这样做。

Answer 1

您的问题是您实际上并未在任何地方检查localStorage。您也不应将show设置为'true'，因为您正试图切换此设置。

<script>
  jQuery.noConflict();
  jQuery(document).ready(function($) {
    $box1 = $('#box1');
    const show = JSON.parse(localStorage.getItem('show'));

    if (show) {
      $box1.show();
    } else {
      // initialize value in case it hasn't been set already
      localStorage.setItem('show', false);
    }

    $('#chk1').click(function() {
      $box1.slideToggle('200'); 
      // toggle the boolean by negating its value
      const show = JSON.parse(localStorage.getItem('show'));
      localStorage.setItem('show', !show);
    });
  });
</script>

请注意，从本地存储中检索的值必须解析为JSON，因为它们是作为字符串提供给您的。

通过始终正确缩进嵌套块，让您的生活更轻松。更容易阅读。

如何使用cookie或localStorage记住div的打开/关闭状态？

1 个答案: