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

我试图关闭一个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>

jQuery.noConflict（）；
jQuery（文档）.ready（函数（$）{
$（'#chk1'）。单击（函数（）{
$（'#box1'）。滑动切换（'200'）；
setItem（'show'，'true'）；
});
});

除了不记得div的打开/关闭状态外，它还能工作

---

如果可能的话，我不想再添加任何脚本

您的问题是您实际上没有在任何地方检查本地存储。您也不应该将

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>

jQuery.noConflict（）；
jQuery（文档）.ready（函数（$）{
$box1=$（“#box1”）；
const show=JSON.parse（localStorage.getItem（'show'））；
如果（显示）{
$box1.show（）；
}否则{
//如果尚未设置，则初始化该值
setItem（'show'，false）；
}
$（'#chk1'）。单击（函数（）{
$box1.滑动切换（'200'）；
//通过对布尔值求反来切换布尔值
const show=JSON.parse（localStorage.getItem（'show'））；
setItem（'show'，！show）；
});
});

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

---

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

您需要首先使用

localStorage.getItem（'show'）

检查存储在

localStorage

中的值，并检查它是否为真。然后相应地显示/隐藏div。此外，您没有将

show

的值切换为

true/false

。您显示切换值以更改状态。它工作不太正常。如果我在清除浏览器后进入页面，div将关闭（就像它假定的那样），但是如果我刷新页面，div将打开。如果我试图关闭它并刷新页面，它仍然保持打开状态。@Freejoy yep我犯了一个错误，忘记了

localStorage.setItem（…）

在存储值之前将值转换为字符串。这意味着您必须使用

JSON.parse

来检索原始值，或者仅将值作为字符串处理。我错了！我编辑了答案。（这也意味着如果要存储对象而不是原语值，必须首先对其调用

JSON.stringify

。）