简易而又灵活的Javascript拖拽框架（五）

核心提示：本文示例源代码或素材下载 一、开篇 在写了前几篇拖拽过后，有不少朋友留言说如果将拖拽结果持久化将会更好，简易而又灵活的Javascript拖拽框架（五），在了解了Javascript对Cookie的操作还有一点JSON知识过后，修改了上一篇文章的代码，这样读取的时候只需要用eval即可得到保存的数据的对象，这是

本文示例源代码或素材下载

一、开篇

在写了前几篇拖拽过后，有不少朋友留言说如果将拖拽结果持久化将会更好。在了解了Javascript对Cookie的操作还有一点JSON知识过后，修改了上一篇文章的代码，可以将结果保存在客户端Cookie，每次打开页面就可以载入上次拖拽的数据，得到上次的拖拽布局。

查看示例: http://220.194.56.98:8000/LongWayDemos/Drag5/

二、原理

首先添加了两个方法：setCookie和getCookie，分别用来添加/修改Cookie和读取Cookie，这些教程太多了，就不多说了。

然后来说说打开网页到关闭网页的整个过程：

1、打开网页的时候，会通过getCookie去读取名为“XDrag”的Cookie，如果用户是第一次打开这个页面（或者是禁用、手动删除了Cookie，总之客户端没有对应的Cookie的时候），则会有一个默认的配置；

2、网页的html元素的结构也有所变化，以前是直接把拖拽的模块直接放置在对应的页对应的列，现在是统一放在tempContainer这个div中，通过读取的配置来将tempContianer里面的模块“分发”到配置指定的页制定的列；

3、注册window.onbeforeunload事件，在页面unload之前保存配置到Cookie。保存的方法就是遍历每一页的每一列的每一个模块，将每个模块的id记录下来，根据页面和列和id来构造一个JSON字符串（因为Cookie保存的值就是字符串），这样读取的时候只需要用eval即可得到保存的数据的对象，这是JSON的优点。

下面是这个JSON字符串的结构，嵌套了3层array

jsonObj.pages得到pages数组

jsonObj.pages[0]得到page1的列的数组

jsonObj.pages[0][0]得到page1的第一列的所有id的集合

三、代码

下面是几个添加的几个主要的方法：

setCookie和getCookie

functionsetCookie(sName,sValue,oExpires,sPath,sDomain,bSecure){
　　varsCookie=sName+"="+encodeURIComponent(sValue);
　　if(oExpires)
　　　　sCookie+=";expires="+oExpires.toGMTString();
　　if(sPath)
　　　　sCookie+=";path="+sPath;
　　if(sDomain)
　　　　sCookie+=";domain="+sDomain;
　　if(bSecure)
　　　　sCookie+=";secure";
　　　　
　　document.cookie=sCookie;
}
functiongetCookie(sName){
　　varsRE="(?:;)?"+sName+"=([^;]*);?";
　　varoRE=newRegExp(sRE);
　　if(oRE.test(document.cookie))
　　　　returndecodeURIComponent(RegExp["$1"]);
　　else
　　　　returnnull;
}

遍历布局保存到Cookie

XDrag.save=function(){//将结果保存到cookie
　　varjsonString=newStringBuilder();
　　jsonString.append('{"pages":[')
　　for(vari=0;i<XDrag.pages.length;i++){//遍历每一页
　　　　jsonString.append("[");
　　　　varpage=XDrag.pages[i];
　　　　for(varj=0;j<page.childNodes.length;j++){//遍历每一列
　　　　　　varcolumn=page.childNodes[j];
　　　　　　if(column.nodeName.toLowerCase()!="div")
　　　　　　　　continue;
　　　　　　jsonString.append("[");
　　　　　　for(vark=0;k<column.childNodes.length;k++){//遍历每一列的module
　　　　　　　　varmodule=column.childNodes[k];
　　　　　　　　if(module.nodeName.toLowerCase()!="div"||module.style.display=="none")
　　　　　　　　　　continue;
　　　　　　　　jsonString.append('"'+module.id+'",');
　　　　　　}
　　　　　　jsonString.append("],");
　　　　}
　　　　jsonString.append("],");
　　}
　　jsonString.append(']}');
　　varjsonStr=jsonString.toString();
　　varcookieValue=jsonStr.replace(/,]/g,"]");
　　setCookie("XDrag",cookieValue,null,null,null,false);
}

从Cookie读取保存的布局

XDrag.readFromCookie=function(){//读取cookie
　　varvalue=getCookie("XDrag")||XDrag.defaultLayout;
　　varobj=eval('('+value+')');
　　returnobj;
}