簡易而又靈活的Javascript拖拽架構（五）

一、開篇

     在寫了前幾篇拖拽過後，有不少朋友留言說如果將拖拽結果持久化將會更好。在瞭解了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的集合

三、代碼

       下面是幾個添加的幾個主要的方法：

setCookie和getCookie
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;
}

遍曆布局儲存到Cookie
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);
}

從Cookie讀取儲存的布局
XDrag.readFromCookie = function(){//讀取cookie
    var value = getCookie("XDrag") || XDrag.defaultLayout;
    var obj = eval('(' + value + ')');
    return obj;
}

 

四、樣本下載

      點此下載樣本