在每次创建一个新的dialog和对它进行拖拽和拉伸之后,如何保存下每个dialog的位置和大小?代码如下

在每次创建一个新的dialog和对它进行拖拽和拉伸之后,怎么保存下每个dialog的位置和大小??代码如下。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>JS模拟Dialog实现可创建可拖拽拉伸可拖动可关闭的浮动div层</title>
    <style type="text/css">
    .dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;}
    .dialogtitle{height:26px; width:auto; background-image:url(/imagesforcode/201209/103444839_p.gif);}
    .dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }
    .dialogtitleico{float:right; height:20px;  width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; vertical-align:middle; background-image:url(/imagesforcode/201209/103419495_p.gif);background-position:-21px 0px}
    .dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;}
    .dialogbottom{
    bottom:1px; right:1px;cursor:nw-resize;
    position:absolute;
    background-image:url(imagesforcode/201209/103419495_p.gif);
    background-position:-42px -10px;
    width:10px;
    height:10px;
    font-size:0;}
    </style>
    </head>
    <body >
    <input value="创建" type="button" onclick="creat()" />
    <div id='aa'></div>
    <script>
    var z=1,i=1,left=10
    var isIE = (document.all) ? true : false;
    var $ = function (id) {
    return  document.getElementById(id);
    };
    var Extend = function(destination, source) {
    for (var property in source) {
    destination[property] = source[property];
    }
    }
    var Bind = function(object, fun,args) {
    return function() {
    return fun.apply(object,args||[]);
    }
    }
    var BindAsEventListener = function(object, fun) {
    var args = Array.prototype.slice.call(arguments).slice(2);
    return function(event) {
    return fun.apply(object, [event || window.event].concat(args));
    }
    }
    var CurrentStyle = function(element){
    return element.currentStyle || document.defaultView.getComputedStyle(element, null);
    }
    function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};
    function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
    function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};
    var Class = function(properties){
    var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
    _class.prototype = properties;
    return _class;
    };
    var Dialog = new Class({
    options:{
    Width       : 400,
    Height      : 400,
    Left        : 100,
    Top         : 100,
    Titleheight : 26,
    Minwidth    : 200,
    Minheight   : 200,
    CancelIco   : true,
    ResizeIco   : false,
    Info        : "新闻标题",
    Content     : "无内容",
    Zindex      : 2