javascript - 关闭后取决于保持盒子

Question

当我单击按钮并使用 jQuery (Toggle) 关闭我的框时，如果框关闭我想在我刷新页面后框将取决于保留。或者如果它是打开的，在我刷新页面后它将保持打开状态。
我不知道帮助我做我想做的事的代码。
例如我写了一段代码，当我们点击红色方 block 时，蓝色方 block 会消失，当我们再次点击它时，蓝色方 block 会出现。但是有一个问题，在我刷新页面后，我的数据或更改将被遗忘。
DEMO
CSS:

.close-open {
    background:red;
    width:50px;
    height:50px;
    float:left;
}
.box {
    background:blue;
    width:100px;
    height:100px;
    float:left;
    clear:left;
    margin:40px 0px 0px 0px;
}

HTML:

<span class="close-open"></span>
<div class="box">Test Box Toggle</div>

jQuery :

$(document).ready(function(){
  $(".close-open").click(function(){
    $(".box").toggle();
  });
});

Answer 1

您可以通过一些方式实现这一点。我将展示一个 Web Storage :

js

$(document).ready(function(){
    var isClose = localStorage.getItem("isClose");
    if(isClose == "false"){
        $(".box").hide();
    } 

  $(".close-open").click(function(){
    $(".box").toggle(
        function(){
            localStorage.setItem("isClose", $(this).is(':visible'));
        });
  });
});

fiddle

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.