对于很多网站来说，能够记住用户的点击选项是有必要的，比如页面上的单选项、复选项、下拉框等，可是网站上可能有很多这种选项，如何能快速地、方便地实现这个功能呢？ 我的想法是，针对每一个选项进行JS代码
对于很多网站来说，能够记住用户的点击选项是有必要的，比如页面上的单选项、复选项、下拉框等，可是网站上可能有很多这种选项，如何能快速地、方便地实现这个功能呢？
我的想法是，针对每一个选项进行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事件。
