文档章节

一个简单的全站记忆功能

haidywei
 haidywei
发布于 2016/06/13 14:13
字数 675
阅读 5
收藏 0

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

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

© 著作权归作者所有

共有 人打赏支持
haidywei
粉丝 0
博文 1
码字总数 675
作品 0
卢湾
新功能:阿里云负载均衡SLB支持HTTP访问强制转换HTTPS

1. Greeting 很高兴的告诉大家,阿里云负载均衡SLB已经在澳大利亚(悉尼)、日本(东京)、阿联酋(迪拜)、美国 (弗吉尼亚)、美国(硅谷)、马来西亚(吉隆坡)、德国(法兰克福)、新加坡...

添毅
04/13
0
0
Gitblog 2.0 发布, Markdown 博客系统

一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。它摆脱了在线编辑器排版困难,无法实时预览的缺点,一...

jockchou
2015/07/31
3.8K
26
何小鹏:本地化自动驾驶和贴近中国用户的车载互联功能是我们的优势 | GMIC 2018

小鹏汽车最近动作频频,继宣布小鹏汽车G3价格区间在20万-28万,又刚刚在全球移动互联网大会(GMIC)宣布小鹏汽车启动首日预定,并在年底前完成交付。 据雷锋网新智驾了解,截至今天下午15点3...

利荣
04/27
0
0
Gitblog 官网更新,Markdown 博客系统

Markdown 博客系统 Gitblog 官网更新! Gitblog官网 Gitblog使用手册 官方截图 一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你...

jockchou
2015/08/03
758
2
Gitblog官方网站发布上线

Gitblog官方网站发布上线 一. 简介 Gitblog是一个简单易用的Markdown博客系统,它不需要数据库,没有管理后台功能,更新博客只需要添加你写好的Markdown文件即可。它摆脱了在线编辑器排版困难...

jockchou
2015/08/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
46分钟前
0
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
1
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
4
0
八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
今天
2
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部