如何使用 cookie 或 localStorage 记住 open/closed div 的状态？

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 open/closed 状态外，它可以正常工作。

如果可能的话，我想在不添加更多脚本的情况下完成。

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 记住 open/closed div 的状态？

How to remember open/closed state of div using cookie or localStorage?

javascript

cookies

magento

local-storage