toggle_visibility function and cookies

Hi I have the following code on my forum to display/hide a shoutbox

<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
<style type="text/css">
<!--
..style4 {font-size: 12px}
-->
</style>

<a href="#" class="style4" onclick="toggle_visibility('foo');">Click
to Display or Hide the Shoutbox</a>
<div id="foo"style="display:none;">

<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></
span>
<ul class="topiclist">
<li class="header">
<dl>
<dt>{L_SHOUTBOX}</dt>
</dl>
</li>
</ul>
<span id="shoutbox"></span>
<span class="corners-bottom"><span></span></span></div>
</div>
<script type="text/javascript">
display_shoutbox = true;
load_shout();
</script>

</div>


Is there anyway to set a cookie to remember the users preference for a
given period of time (say 7 days at a time)
I'm sure you can work out how the code works but the href link gets or
removes the "foo" value which is everything after: <div
id="foo"style="display:none;">
when they click on the link, the shoutbox appears or dissapears
the display:none bit sets the default as not displayed.
as i said if i could have a cookie remember their choice for a session
and then say 7 days after, returning to not shown as a default if they
don't return after 7 days, that would be grand.
thanks in advance