如何使用javascript与cookie保存层的拖动后位置？？

页面上中有几个可以任意拖动的层，我想实现在任意拖动后可以保存住层所在的位置！即层拖动后关闭浏览器重新打开，那些层还是留在上一次拖动后的位置。
这里附上拖动层的实现，请高手们再利用cookie帮忙实现页面的保存。万分感激！！！层的拖动：
<html> 
<style type="text/css"> 
<!--
body {font-family:Verdana; font-size:11px; color:#333333;} 
#layer1 {position:absolute; left:100px; top:100px; width:300px; height:200px;} 
#layer2 {position:absolute; left:200px; top:350px; width:300px; height:200px;} 
.title {width:100%; height:30px; font-size:16px; font-weight:bold; border:1px solid #9BC8F0; background-color:#CFF0FA;color:#0066FF; cursor:move;} 
.main {width:100%; height:170px; border:1px solid #9BC8F0;}
-->
</style> 
<script> 
var x0=0,y0=0,x1=0,y1=0; 
var moveable=false; //开始拖动; 
function startDrag(obj){ 
if(event.button==1){ 
obj.setCapture(); //设置属于当前对象的鼠标捕捉
var win = obj.parentNode; 
x0 = event.clientX; 
y0 = event.clientY; 
x1 = parseInt(win.offsetLeft); 
y1 = parseInt(win.offsetTop); 
moveable = true; 
} 
}
 
//拖动; 
function drag(obj){ 
if(moveable){ 
var win = obj.parentNode; 
win.style.left = x1 + event.clientX - x0; 
win.style.top = y1 + event.clientY - y0; 
} 
} //停止拖动; 
function stopDrag(obj){ 
if(moveable){ 
obj.releaseCapture(); //释放当前对象的鼠标捕捉
moveable = false; 
} 
} 
</script>
 
<body>
<div id="layer1"> 
<div class="title" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">点击这里拖动1</div> 
<div class="main"> 
<p style="font:24px">1111111111111111111</p>
<p style="font:24px">1111111111111111111</p>
</div> 
</div> 
<div id="layer2"> 
<div class="title" onMouseDown="startDrag(this)" onMouseUp="stopDrag(this)" onMouseMove="drag(this)">点击这里拖动2</div> 
<div class="main"> 
<p style="font:24px">2222222222222222222</p>
<p style="font:24px">2222222222222222222</p>
</div> 
</div> 
</body> 
</html>