问题源于一个群里面的提问，在一个网页上添加一个select表单，当用户选择表单的时候，内容区会显示不同的内容，并在该用户下次打开此网页的时候记住这个设置。 像这样的东东一般都会想到要用Cookies来存储设置，方便起见，对于DOM的操作就想到了jQuery（直接写js执行效率会更高，只是，人都是很懒的嘛，呵呵..）。记录下来也算是个笔记吧(Demo)。 首先写这么一个Select下拉表单，以及用来输出被选中项相应内容的块：
请选择城市
北京
上海
武汉
深圳
然后是用来处理Cookies的函数，其实jQuery有个插件是干这个的，不过貌似有点小Bug，所以我用的是以下函数：
//这一大段代码你没有必要知道它的确切意思，只要复制粘贴就可以了，他们是用来提供操作Cookies的支持的
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else var expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}
function getCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function dropCookie(name) {
setCookie(name,””,-1);
}
然后是用来操作表单和Cookies的js：
$(function(){
//以下部分是提取Cookie并对网页内容进行预设的过程
var cityChosen = getCookie(‘citychosen’); //取得cookie中保存的值
if(cityChosen!=null && cityChosen!=’’){ //如果有这个cookie值
var chosen = $(‘#choose option[value=”‘+cityChosen+’”]‘); //绑定cookie中保存的那个城市所对应的选项
chosen.attr(‘selected’,true); //使此选项变为选定状态
$(“#output”).removeClass().addClass(cityChosen).html(“你上次选择了
“ + chosen.text()); //为id为output的div添加class为相应城市名称的类，以便在css中分别定义样式，并输出相应文字
}
//以下部分是用户对下拉菜单进行选取的时候，将设置存到Cookie，并对相应内容部分进行设定
$(“#choose”).change(function(){
var selected = $(“#choose option:selected”); //浏览者选中一个选项
var output = “”;
if(selected.val() != 0){ //如果选项的值不为0
setCookie(‘citychosen’,selected.val(),365); //将被选中选项的value值存在名为citychosen的cookie里面，有效期一年
output = “你这次选择了
“ + selected.text(); //设定output中的内容
}
$(“#output”).removeClass().addClass(selected.val()).html(output); //在id为output的div里面输出相应的内容
});
});
想要效果看得更清楚明白一点，写了一点点小CSS：
*{ margin:0; padding:0;}
body{ font:24px Verdana, Geneva, sans-serif; margin:100px;}
#output{ color:#fff; margin:20px 0; padding:50px; height:200px; width:200px;}
.default{ background:#CCC;}
.beijing{background:red;}
.shanghai{background:blue;}
.wuhan{background:orange;}
.shenzhen{background:plum;}
它们整合起来以后，大概就是如下代码了：
//<![CDATA[
$(function(){
var cityChosen = getCookie(‘citychosen’);
if(cityChosen!=null && cityChosen!=’’){
var chosen = $(‘#choose option[value=”‘+cityChosen+’”]‘);
chosen.attr(‘selected’,true);
$(“#output”).removeClass().addClass(cityChosen).html(“你上次选择了
“ + chosen.text());
}
$(“#choose”).change(function(){
var selected = $(“#choose option:selected”);
var output = “”;
if(selected.val() != 0){
setCookie(‘citychosen’,selected.val(),365);
output = “你这次选择了
“ + selected.text();
}
$(“#output”).removeClass().addClass(selected.val()).html(output);
});
});
//以下是用来处理Cookies的函数
function setCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else var expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}
function getCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function dropCookie(name) {
createCookie(name,””,-1);
}
//]]>
选择表单
请选择城市
北京
上海
武汉
深圳
效果演示可以看这个：Demo PS：Chrome的安全工作做得可真够彻底的，本地文件居然不可以操作Cookies，害我测试了好久..