之前写了个搜索聚合的网页如下，然后了就有个挺实际的需求。
在网页中有百度、谷歌、必应三个不同的搜索引擎可供选择。
有时可能并不需要三个同时用，比如只用百度，那么就只勾选百度。
但用户的选择是不会被记录的，下次再打开或者刷新网页，又会变成三个都选中的状态。
因为在网页的代码里默认是三个都选上的。
因此每次使用都要重新选择，很麻烦。
所以就有了个记录用户选择的需求，而Cookie便是可以满足这个需求的解决方案。
1.Cookie介绍与使用
(1)Cookie简介
Cookie简单来说就是用于存储Web页面的用户信息。 从JavaScript的角度看，Cookie就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。
当Web服务器向浏览器发送Web页面时，在连接关闭后，服务端不会记录用户的信息。 Cookie的作用就是用于解决 “如何记录客户端的用户信息”: 当用户访问Web页面时，他的名字可以记录在Cookie中。 那么在用户下一次访问该页面时，可以在Cookie中读取用户访问记录。 Cookie以”键/值”对形式存储，当浏览器从服务器上请求Web页面时，属于该页面的Cookie会被添加到该请求中。
关于Cookie有几个知识点：
- Cookie是有大小限制的，每个Cookie所存放的数据不能超过4KB，如果Cookie字符串的长度超过4KB，则该属性将返回空字符串。
- 由于Cookie最终都是以文件形式存放在客户端计算机中，所以查看和修改都是很方便的，因此不建议存放重要信息。
- Cookie是存在有效期的。默认情况下，一个Cookie的生命周期就是在浏览器关闭的时候。如果想要Cookie能在浏览器关掉之后还可以使用，就必须要为该Cookie设置有效期，也就是Cookie的失效日期。
- Cookie有域和路径这个概念。域就是domain。因为浏览器是个注意安全的环境，所以不同的域之间是不能互相访问Cookie(特殊手段除外)。路径就是routing，一个网页所创建的Cookie只能被与这个网页在同一目录或子目录下的所有网页访问，而不能被其他目录下的网页访问。
(2)Cookie的使用
a.创建&修改
document.cookie="username=John Doe";
这就表示创建了一个名为username，内容为John Doe的Cookie。
并且如果这个Cookie已经存在，那么这行代码就表示修改已有的Cookie为当前内容。
当然也可以为Cookie指定有效期，如下。
document.cookie="username=John Doe; expires=Thu, 20 Apr 2018 12:00:00 GMT";
这就表示该Cookie的有效期是到4月20号。
b.读取
var x = document.cookie;
document.cookie将以字符串的方式返回所有的Cookie，类型格式：cookie1=value; cookie2=value; cookie3=value;
c.删除
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
删除Cookie非常简单,只需要设置expires参数为以前的时间即可，删除时不必指定Cookie的值。
d.封装函数
基于以上知识，可以对常用的写入、读取Cookie功能进行封装，如下。
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
利用以上两个函数，只需要输入相应参数，即可实现功能，十分方便。
(3)Cookie的具体应用
对应到上面所描述的需求，实现的思路也比较简单。 首先在加载网页时先读取Cookie，加载Cookie放在body的onload对应的函数中执行。 如果没有找到之前保存的记录(对于第一次打开网页而言)，则获取网页上当前CheckBox的状态，并写入Cookie。 而之后当用户再次打开时，读取到了之前保存的状态，则将保存的状态依次赋给页面上的CheckBox，实现用户选择状态的保存。 对于保存Cookie行为的触发，将其放到搜索按钮的点击事件中，用户点击搜索了，就把用户当前的选择存进Cookie。 部分代码如下。
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function getSelect(){
var chk_google = document.getElementById("google");
var chk_bing = document.getElementById("bing");
chk_google = chk_google.checked;
chk_bing = chk_bing.checked;
var s_baidu = getCookie("SelectBaidu");
var chk_baidu = document.getElementById("baidu");
if(s_baidu==""){
c_baidu = chk_baidu.checked;
setCookie("SelectBaidu",c_baidu,30);
}else{
var baidu_flag = s_baidu ==="false" ? false : true;
chk_baidu.checked=baidu_flag;
}
var s_google = getCookie("SelectGoogle");
var chk_google = document.getElementById("google");
if(s_google==""){
c_google = chk_google.checked;
setCookie("SelectGoogle",c_google,30);
}else{
var google_flag = s_google ==="false" ? false : true;
chk_google.checked=google_flag;
}
var s_bing = getCookie("SelectBing");
var chk_bing = document.getElementById("bing");
if(s_bing==""){
c_bing = chk_bing.checked;
setCookie("SelectBing",c_bing,30);
}else{
var bing_flag = s_bing ==="false" ? false : true;
chk_bing.checked=bing_flag;
}
}
</script>
<script type="text/javascript">
function search() {
var search_content = document.getElementById("input_content");
search_content=search_content.value;
var url_baidu = "https://www.baidu.com/s?wd="+search_content;
var url_bing = "https://cn.bing.com/search?q="+search_content;
var url_google = "https://www.google.com/search?q="+search_content;
var chk_baidu = document.getElementById("baidu");
var chk_google = document.getElementById("google");
var chk_bing = document.getElementById("bing");
chk_baidu = chk_baidu.checked;
chk_google = chk_google.checked;
chk_bing = chk_bing.checked;
setCookie("SelectBaidu",chk_baidu,30);
setCookie("SelectGoogle",chk_google,30);
setCookie("SelectBing",chk_bing,30);
if(chk_baidu){
window.open(url_baidu);
}
if(chk_google){
window.open(url_google);
}
if(chk_bing){
window.open(url_bing);
}
if(!chk_baidu && !chk_google && !chk_bing)
{
alert("请至少选择一个搜索引擎");
}
}
</script>
基于以上代码，便可以实现用户搜索引擎选择状态的保存了，只要在Cookie有效期之前，且用户没有手动删除Cookie，就会一直存在。 可以直接打开搜索聚合进行测试。
3.参考资料
- https://www.runoob.com/js/js-cookies.html
- https://www.cnblogs.com/Darren_code/archive/2011/11/24/Cookie.html
本文作者原创,未经许可不得转载,谢谢配合
