一、开篇
在写了前几篇拖拽过后,有不少朋友留言说如果将拖拽结果持久化将会更好。在了解了JavaScript对Cookie的操作还有一点JSON知识过后,修改了上一篇文章的代码,可以将结果保存在客户端Cookie,每次打开页面就可以载入上次拖拽的数据,得到上次的拖拽布局。
查看示例
二、原理
首先添加了两个方法: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的集合
三、代码
下面是几个添加的几个主要的方法:
function setCookie(sName,sValue,oExpires,sPath,sDomain,bSecure){
var sCookie = 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;
}
function getCookie(sName){
var sRE = "(?:; )?" + sName + "=([^;]*);?";
var oRE = new RegExp(sRE);
if(oRE.test(document.cookie))
return decodeURIComponent(RegExp["$1"]);
else
return null;
}
XDrag.save = function(){//将结果保存到cookie
var jsonString = new StringBuilder();
jsonString.append('{"pages":[')
for(var i=0;i<XDrag.pages.length;i++){//遍历每一页
jsonString.append("[");
var page = XDrag.pages[i];
for(var j=0;j<page.childNodes.length;j++){//遍历每一列
var column = page.childNodes[j];
if(column.nodeName.toLowerCase() != "div")
continue;
jsonString.append("[");
for(var k=0;k<column.childNodes.length;k++){//遍历每一列的module
var module = column.childNodes[k];
if(module.nodeName.toLowerCase() != "div" || module.style.display == "none")
continue;
jsonString.append('"' + module.id + '",');
}
jsonString.append("],");
}
jsonString.append("],");
}
jsonString.append(']}');
var jsonStr = jsonString.toString();
var cookieValue = jsonStr.replace(/,]/g,"]");
setCookie("XDrag",cookieValue,null,null,null,false);
}
XDrag.readFromCookie = function(){//读取cookie
var value = getCookie("XDrag") || XDrag.defaultLayout;
var obj = eval('(' + value + ')');
return obj;
}
四、示例下载
点此下载示例 http://files.cnblogs.com/LongWay/Drag5.rar
在写了前几篇拖拽过后,有不少朋友留言说如果将拖拽结果持久化将会更好。在了解了JavaScript对Cookie的操作还有一点JSON知识过后,修改了上一篇文章的代码,可以将结果保存在客户端Cookie,每次打开页面就可以载入上次拖拽的数据,得到上次的拖拽布局。
查看示例
二、原理
首先添加了两个方法: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的集合
三、代码
下面是几个添加的几个主要的方法:
function setCookie(sName,sValue,oExpires,sPath,sDomain,bSecure){
var sCookie = 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;
}
function getCookie(sName){
var sRE = "(?:; )?" + sName + "=([^;]*);?";
var oRE = new RegExp(sRE);
if(oRE.test(document.cookie))
return decodeURIComponent(RegExp["$1"]);
else
return null;
}
XDrag.save = function(){//将结果保存到cookie
var jsonString = new StringBuilder();
jsonString.append('{"pages":[')
for(var i=0;i<XDrag.pages.length;i++){//遍历每一页
jsonString.append("[");
var page = XDrag.pages[i];
for(var j=0;j<page.childNodes.length;j++){//遍历每一列
var column = page.childNodes[j];
if(column.nodeName.toLowerCase() != "div")
continue;
jsonString.append("[");
for(var k=0;k<column.childNodes.length;k++){//遍历每一列的module
var module = column.childNodes[k];
if(module.nodeName.toLowerCase() != "div" || module.style.display == "none")
continue;
jsonString.append('"' + module.id + '",');
}
jsonString.append("],");
}
jsonString.append("],");
}
jsonString.append(']}');
var jsonStr = jsonString.toString();
var cookieValue = jsonStr.replace(/,]/g,"]");
setCookie("XDrag",cookieValue,null,null,null,false);
}
XDrag.readFromCookie = function(){//读取cookie
var value = getCookie("XDrag") || XDrag.defaultLayout;
var obj = eval('(' + value + ')');
return obj;
}
四、示例下载
点此下载示例 http://files.cnblogs.com/LongWay/Drag5.rar