Question

当我点击按钮并使用jQuery（Toggle）关闭我的框时，如果关闭框我希望框将在刷新页面后依赖于保持。或者如果它是打开的，刷新页面后它将保持打开状态。我不知道帮我做我想做的代码。
例如，当我们点击红色方块时，我写了一个代码，蓝色方块将消失，当我们再次点击它时，将出现蓝色方块。但是有一个问题，我刷新页面后我的数据或更改将被遗忘 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

localStorage对象存储没有过期日期的数据。该浏览器关闭时，不会删除数据第二天，一周或一年可用。

Answer 2

如果您想将此功能限制在特定会话中，您可以使用此...

$(document).ready(function(){
                             if(sessionStorage.isVisible == "false" ){
                                 $(".box").hide();
                                 sessionStorage.isVisible = "true";
                             }
                             else
                                 sessionStorage.isVisible = "false";
  $(".close-open").click(function(){           
    sessionStorage.isVisible = $(".box").toggle().is(':visible');
  });
});

fiddle Demo

取决于关闭后保持框

2 个答案: