前面已经实现了个性化主页的核心功能，栏目的添加、设置和关闭；但是还存在一些问题，比如用户定制的栏目信息无法保存，在刷新页面之后整个页面又成为空白，需要重新添加栏目。这对于用户来说是很不方便的，因此需要提供一种栏目定制信息存取的机制，在离开页面时保存用户当前的栏目定制信息，在页面加载时读取已有的栏目定制信息，初始化主页。
1. 存储方式的选择
如果有后台数据库的支持，可以将用户的栏目定制信息保存在数据库中，与用户的信息相关联。前面实现的个性化主页并不要求用户在网站上进行注册和登录，因此这里将栏目定制信息保存在Cookie中。
关于栏目定制信息的存储格式也是一个值得考虑的问题，有以下几种方式可供选择。
l 保存为XML格式
XML是一种通用的文本格式，在客户端解析XML文档也有相关的第三方提供跨浏览器的解决方案。但是对于目前需要解决的问题，XML的方式显得比较笨重，有小题大做的嫌疑，在效率上并不是最优。
l 保存为普通文本
保存为普通文本的方式在实现上比较简单，不需要引入有关XML解析的脚本库，通过简单的字符串处理就可以完成保存任务。但是这种方式的缺点在于可扩展性较差，现在栏目定制信息的内容非常简单，如果以后有了新的需求。在这种情况下，如果采用普通文本保存栏目定制信息，相关的JavaScript代码可能需要进行较多的修改。
l 保存为JSON格式的文本
JSON格式的文本，其内容实际上是一段JavaScript代码，它可以表示任何JavaScript对象。无论采用哪种方式保存栏目定制信息，最终都需要将其转化为JavaScript对象，在JavaScript代码中使用。如果使用JSON的方式则直接保存我们所需要的JavaScript对象，在使用时只需读取cookie，调用eval方法就可以得到栏目定制信息的JavaScript对象。这种方式在效率和可扩展性上都是相当不错的。
经过以上比较，选择JSON格式文本保存栏目定制信息，实际保存在cookie中的文本如下：
[
[
“ModelName”, “Type”, “dbName”, “dbTableName”, “dbFieldName”, “dbFilter”
],
[
“ModelName”, “Type”, “xmlName”, “xmlURL”, “”, “”
]
]
它表示一个JavaScript数组对象，它的每一个成员都是一个字符串数组，分别代表了个性化页面中各个容器中栏目的提示性内容（传参数）。
2. Cookie的存储和读取
SetCookie和ReadCookie方法分别实现了cookie的存储和读取，实现方法比较简单，可参考如下代码：
function SetCookie(cookieName, cookieValue, nDays){
//当前时间
var today = new Date();
//Cookie 失效时间
var expire = new Date();
//如果没有指定 nDays 参数，默认 cookie 保存 1 天
if (nDays == null || nDays == 0) nDays == 1;
expire.setTime(today.getTime() + 3600000 * 24 * nDays);
//设置cookie的值
document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" + expire.toGMTString();
}
function ReadCookie(cookieName){
//读取 cookie 的值
var theCookie = "" + document.cookie;
//找到 cookieName 对应的位置
var ind = theCookie.indexOf(cookieName);
//cookie 不存在
if (ind == -1 || cookieName == "") return "";
//读取 cookieName 对应的 cookie 值
var ind1 = theCookie.indexOf(';',ind);
if (ind1 == -1) ind1 = theCookie.length;
return unescape(theCookie.substring(ind + cookieName.length + 1, ind1));
}
3. 栏目定制信息的保存
栏目定制信息的保存是在浏览器关闭或者离开页面时进行的，也就是在body的onunload事件响应函数saveLayout()中完成栏目定制信息的保存。具体的实现方法是遍历每个栏目容器中<div>对象，将参数保存在cookie中。在添加栏目的过程中，需要保存的参数使用document.getElementById(“……”).value或document.getElementById(“……”).innerHTML获取，然后将其读取处理。代码如下：
function saveLayout(){
//字符串数组对象
var data = [];
//栏目容器列表
var contatiners = $("xmlContainer","dbContainer");
//遍历每一个栏目容器
container.each(function(container){
//字符串数组对象
var modulesData = [];
//栏目div对象
var modules = document.getElementByClassName("modules", container);
//遍历容器中的每一个栏目对象
modules.each(function(module){
//获取参数值
//将获取到的每个参数值赋值给数组
modulesData.push(value);
});
//将字符串数组对象加入data数组
data.push("["""+ modulesData.join(""",""") + """]");
});
//连接最终保存到cookie中的JSON字符串
var json = "([" + data.join(",") + "])";
//在cookie中保存JSON字符串
SetCookie("homepage", json, 7);
}
自定义栏目定制信息保存地址，通过document.execCommand("SaveAs")实现“另存为”。
4. 栏目定制信息的读取
栏目定制信息已经成功地保存到cookie中，下面要完成的功能是从cookie中读取出相应的栏目定制信息，然后初始化栏目。这些操作都将在body的onload响应函数init()中进行的。代码如下：
function init(){
//读取cookie信息
var cookieDate = ReadCookie("homepage");
//栏目定制信息
var data;
//如果没有cookie信息，则使用默认的栏目定制信息
if (!cookieData){
data =
[
[
“dbSource”,“db”, “deschema_test”, “XSXX”, “studentname,ClassNo”, “3”
],
[
“xmlSource”, “xml”, “authors”, “e:/xml”, “”, “”
]
]；
}else{
//使用cookie中的栏目定制信息
data = eval(cookieData);
}
//栏目容器列表
var contatiners = $("xmlContainer","dbContainer");
//遍历data中的栏目定制信息
data.each(function(modulesData, index){
//使用Ajax技术的xmlHttpRequest对象完成异步交互;
//将获取的数据显示在页面上
});
}
