Depending on hold the box after close it

Question

When I click to the button and close my box with jQuery ( Toggle ) ,If the box closed I want to box will depend on hold after I refresh the page . Or If it's Open ,after I refresh the page It will stay open.
I don't know the code that help me do what I want .
For example I wrote a code when we click on red Square , the blue square will be disappear and when we click on it again the blue square will be appear . but there is a problem that after I refresh the page My data or changes will be forgotten .
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

You can achieve this with some ways. I will show one with 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.