Cookies

Cookies

I'm just starting in jQuery so i'm trialling some simple codes. Can anyone tell me how to set a cookie so that when I hide/show the block it will remain shown/hidden after a page refresh?

here is my code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
  $(document).ready(function(){
   
     $(".close").click(function () {
      $("#welcome").fadeIn("slow");

    
    });
   
   $(".show").click(function () {
      $("#welcome").fadeOut("slow");

         });
   
    $("a.toggle").click(function () {
      $("a.toggle").toggle();
    });

  });
  </script>
<style>
p {
   font-size:150%;
   cursor:pointer;
}
#welcome .close {
   color: #6CF;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   font-weight: bold;
   text-decoration: none;
   float: right;
}
#welcome p, #welcome2 p {
   font-family: Arial, Helvetica, sans-serif;
   color: #FFF;
   margin: 0px;
   padding: 0px;
   font-size: 18px;
}
.toggle {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 18px;
   color: #63C;
   font-weight: bold;
   text-decoration: none;
   padding: 5px;
   background-color: #0CC;
   float: right;
}
#welcome, #welcome2 {
   background-color: #333;
   padding: 10px;
   width: 300px;
}
</style>
</head>
<body>
<a class="toggle show" href="#">hide header</a>
</p>
<a class="toggle close" style="display: none" href="#">show header</a>
</p>
<div id="welcome">
  <p>If you click on this paragraph
    you'll see it just fade away.
</p>
</div>

</body>
</html>


Many thanks

Craig