一個簡單的全站記憶功能

        對於不少網站來講，可以記住用戶的點擊選項是有必要的，好比頁面上的單選項、複選項、下拉框等，但是網站上可能有不少這種選項，如何能快速地、方便地實現這個功能呢？

        個人想法是，針對每個選項進行JS代碼編寫太繁瑣，最好能寫一個通用的代碼，而後在每一個須要記憶的地方加個標識便可。

        通常來講，每一個網站都會有一個公用的相似叫globle.js的一個文件，每一個頁面都會引用這個文件，那麼不如就在這個文件中動點手腳吧，如下是我加在globle.js文件中的代碼：

/* 
 * 緩存全站的複選框、單選框、下拉框值，再次打開時會默認上次的選項.默認在頁面加載500毫秒後觸發。
 * 也能夠手動觸發只對一個DIV操做，若有些頁面須要某個動做觸發時纔會初始化，以後再加載cookie記憶
*/
cookiememory = function(div){
    var pre = (div==null ? '' : ('#' + div + ' ')),
        inputArr = $(pre + 'input[data-memory]'),
        selectArr = $(pre + "select[data-memory]");
    
    inputArr.each(function(idx,ele){
        var    eleType = $(ele).attr('type');
        
        if(eleType == 'checkbox'){//針對checkbox的處理
            memory4checkbox(ele);
        }else if(eleType == 'radio'){//針對radio的處理
            memory4radio(ele);
        }
    });
    
    selectArr.each(function(idx,ele){//針對下拉框的處理
        memory4selector(ele);
    });
};var memoryTimer = setTimeout("cookiememory()", 500);

function memory4radio(ele){
    var cookieName = $.cookie("userId") + '_' + $(ele).attr('data-memory'),//用戶級別的cookie因此須要加上userid
        cookieVal = $.cookie(cookieName),
        radioName = $(ele).attr('name');
    
    //cookie值不爲空時相應的radio爲點選狀態，不然第一個元素爲點選狀態
    if(!isNull(cookieVal)){
        $("input[name='" + radioName + "'][value=" + cookieVal +"]").prop("checked",true);
    }else{
        $("input[name='" + radioName + "']:first").prop("checked",true);
    }
    $(ele).trigger('change');
    
    //事件只須要綁定一次
    if($(ele).attr('bebound')){
        return;
    }else{
        $("input[name='" + radioName + "']").change(function(){
            $.cookie(cookieName,$("input[name='" + radioName + "']:checked").val());
        });
        $(ele).attr('bebound',true);
    }
        
}

function memory4checkbox(ele){
    var cookieName = $.cookie("userId") + '_' + $(ele).attr('data-memory'),//用戶級別的cookie因此須要加上userid
        cookieVal = $.cookie(cookieName);
    
    if(cookieVal != undefined && cookieVal == 'false'){
        $(ele).prop('checked',false);
    }else{
        $(ele).prop('checked',true);
    }
    
    //事件只須要綁定一次
    if($(ele).attr('bebound')){
        return;
    }else{
        $(ele).on('click',function(){
            $.cookie(cookieName,$(ele).prop('checked'));
        });
        $(ele).attr('bebound',true);
    }
}

function memory4selector(ele){
    var cookieName = $.cookie("userId") + '_' + $(ele).attr('data-memory'),//用戶級別的cookie因此須要加上userid
        cookieVal = $.cookie(cookieName);
    
    //事件只須要綁定一次
    if(!$(ele).attr('bebound')){
        $(ele).on('change',function(){
            if(isNull($(ele).val())){return}
            $.cookie(cookieName,$(ele).val());
        });
        $(ele).attr('bebound',true);
    }
    
    if(isNull(cookieVal)){return}
    if($(ele).find('option[value=' + cookieVal + ']').length < 1){return;}//cookie的值不在select值範圍以內

    $(ele).val(cookieVal);
    $(ele).trigger('change');
}

 

以上的代碼顯示，只要你在須要記憶的控件上加一個「data-memory=cookiekey」就能夠了，固然這個「cookiekey」每一個不一樣而且要惟一。而且在設置完cookie值以後還會觸發相應的click或change事件。