文档章节

一个简单的全站记忆功能

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
Gitblog官方网站发布上线

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

jockchou
2015/08/03
0
0
Markdown 博客系统--Gitblog

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

jockchou
2015/07/31
6.2K
1
Gitblog 官网更新,Markdown 博客系统

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

jockchou
2015/08/03
758
2

没有更多内容

加载失败,请刷新页面

加载更多

arcgis jsapi接口入门系列(2):图层基础操作

//图层相关demo layerFun: function () { //获取地图的所有图层(不包括的图层类型:底图图层(basemaps)) let layers = this.map.layers; ...

canneljls
29分钟前
1
0
MySQL忘记root密码--不重启mysqd重置root密码

先提个问题:如何不重启mysqld,且没有权限修改用户账号和权限的情况下,如何重新设置root密码?不知道没关系,在此之前我也是不知道如何操作的,先看看下面的几种重置root密码的方法。 1、s...

IT--小哥
31分钟前
1
0
php7不再支持HTTP_RAW_POST_DATA,微信支付$GLOBALS[‘HTTP_RAW_POST_DATA’]获取不到数据,

升级到php7后, 发现旧的web系统有些问题, 查看后才发现原来是php7不再支持HTTP_RAW_POST_DATA 原来系统一些地方, 使用$GLOBALS[‘HTTP_RAW_POST_DATA’]来获取数据, 在php7里无法获取了 ...

15834278076
32分钟前
1
0
Android--拨打电话功能

Intent callIntent = new Intent(); callIntent.setAction(Intent.ACTION_DIAL); callIntent.setData(Uri.parse("tel:" + "4008823823")......

lanyu96
39分钟前
1
0
iOS多种刷新样式、音乐播放器、仿抖音视频、旅游App等源码

iOS精选源码 企业级开源项目,模仿艺龙旅行App 3D立体相册,可以旋转的立方体 横竖屏切换工具,使用陀螺仪检测手机设备方向,锁屏状... Swift版Refresh(可以自定义多种样式)架构方面有所优化...

Android爱开源
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部