这里介绍在浏览器客户端保存cookie信息,下次浏览的时候可以获取相应信息,比如淘宝联盟根据这个cookie信息来判断是哪个网站引来的流量,然后给对应网站分账;以及根据用户浏览历史比较商品等;自己可以再web客户端留下具体信息,方便控制,简单如记住用户名,上次浏览时间,用户上次保存信息等等;
cookie是浏览器提供的一种机制,javascript可以调用document 对象的cookie属性,并不是js的性质;
cookie是存储在硬盘的,以域名为键名,下次打开该域名网站便可启用该cookie;
cookie机制将信息存储于用户硬盘,可作为全局变量,是它最大的优点。
我这里用到它主要是使用它存储天气预报地区信息,不用每次用户设置后,重新打开网页都要重新设置地区;
说说js怎么使用cookie,最后将给出实例:
1、介绍cookie;
document.cookie // document的一个属性;
2、为cookie赋值;
cookie赋值是多个值使用分号 ‘ ; ‘分割;
1 2 3 |
document.cookie = ‘key:info;key:info’; // 赋值 多个属性使用 ' ; '分割; |
3、设置cookie超时;
expires //属性设置cookie过期时间;放在cookie设置最后如下;
以下设置 cookie 在 365天后超时;
1 2 3 4 5 |
var date = new Date(); date.setTime(date.getTime()+365*24*3600*1000); document.cookie = ‘key:info;key:info;expires =' + date.toGMTString(); |
4、删除cookie;
删除cookie只需要设置cookie超时,过期就行了;
1 2 3 4 5 |
var date = new Date(); date.setTime(date.getTime() - 10000); // 当前时间往前减一点,就过期了; document.cookie = objName + "=a; expires=" + date.toGMTString(); // 设置时间过期; |
5、cookie使用实例
博主右上角的天气预报有个城市设置里面就用到了,cookie保存用户上次设置的城市;作为一个实例给出js操作cookie增删改查;代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// 获取所有cookie function getAllCookie(){ var allstr = document.cookie; return allstr; } // 获取指定cookie function getOneCookie(objName){ var arrStr = document.cookie.split(";"); for(var i = 0;i < arrStr.length;i ++){ var temp = arrStr[i].split("="); if(temp[0] == objName){ return unescape(temp[1]); } } } // 添加cookie function addCookie(objName,objValue,objTime){ var infostr = objName + '=' + escape(objValue); if(objTime){ infostr += ';expires =' + objTime.toGMTString(); }else{ var date = new Date(); date.setTime(date.getTime()+365*24*3600*1000); infostr += ';expires =' + date.toGMTString(); } document.cookie = infostr; //添加 } // 删除cookie function delCookie(objName){ var date = new Date(); date.setTime(date.getTime() - 10000); document.cookie = objName + "=a; expires=" + date.toGMTString(); } |
代码仅供参考,这是根据自己具体需求定制的代码,稍加修改便可自己使用;
其中escape()对非ASCII字符进行编码
有个小问题,
当取第二个以后的cookie时容易出现:
“start_date=2005-10-30″, ” end_date=2016-10-31″, ” PHPSESSID=r10dwdwdwdd2ostetqf7s7″
因为end_date和PHPSESSID 前面都有一个空格,博主的getOneCookie(objName) 中的参数也必须在前面加个空格才行。没注意的话就容易取不到cookie了。
// 获取指定cookie
function getOneCookie(objName){
var arrStr = document.cookie.split(“;”);
for(var i = 0;i < arrStr.length;i ++){
var temp = arrStr[i].split("=");
if(temp[0] == objName){
return unescape(temp[1]);
}
}
}
这个函数的第二行给位 split(" ;"); 就行了。 在;前面加个空格
错了。是在;后面加空格。
好的,隐约雷鸣同学赞