一个简单的全站记忆功能
博客专区 > haidywei 的博客 > 博客详情
一个简单的全站记忆功能
haidywei 发表于2年前
一个简单的全站记忆功能
  • 发表于 2年前
  • 阅读 5
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

        对于很多网站来说,能够记住用户的点击选项是有必要的,比如页面上的单选项、复选项、下拉框等,可是网站上可能有很多这种选项,如何能快速地、方便地实现这个功能呢?

        我的想法是,针对每一个选项进行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事件。

标签: cookie记忆
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 1
码字总数 675
×
haidywei
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: