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

【问题标题】：How to remember open/closed state of div using cookie or localStorage?如何使用 cookie 或 localStorage 记住 div 的打开/关闭状态？
【发布时间】：2017-08-20 05:19:49
【问题描述】：

我试图让一个 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 的打开/关闭状态。

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

【问题讨论】：

您需要先使用localStorage.getItem('show')检查localStorage中存储的值，并检查它的真假。然后相应地显示/隐藏 div。此外，您不会将show 的值切换为true/false。您显示切换值以更改状态。

标签： javascript magento cookies local-storage

【解决方案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，因为它们是以字符串形式提供给您的。

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

【讨论】：

工作不正常。如果我在清除浏览器后进入页面，则 div 将关闭（就像它假设的那样），但如果我刷新页面，则 div 会打开。如果我尝试关闭它并刷新页面，它仍然保持打开状态。
@Freejoy 是的，我犯了一个错误，忘记了 localStorage.setItem(...) 在存储之前将值转换为字符串。这意味着您必须使用JSON.parse 来检索原始值，或者只将值视为字符串。我的错！我编辑了答案。（这也意味着如果你想存储一个对象而不是原始值，你必须先调用JSON.stringify。）