js随手笔记之一 存储之cookies
一、概念:
什么是cookie? 全称:HTTP Cookie,最初是用于客户端存储回话信息的 。cookie在性质上是绑定在特定的域名下,当设定一个cookie后再给创建它的域名发送请求时,都会包含这个cookie。
cookie的作用是什么?1、当发送请求时会携带客户端所存储的回话信息时可用于服务器端验证客户是来自于发送的哪个请求。2、可用于为客户提供个性化的服务,例如:自动登录等
二、javascript 如何读写cookie?
1、首先,我们先了解下cookie包含有哪些属性?

2、读写,下面是比较通用的原生js操作cookie的方法
//获取cookie
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)){
return unescape(arr[2]);
}else{
return null;
}
}
//设置cookie
function setCookie(c_name,value,time){
var exdate=new Date()
exdate.setTime(exdate.getTime()+time)
document.cookie=c_name+ "=" +escape(value)+
((time==null) ? "" : ";expires="+exdate.toGMTString());
}
在客户端中都是通过document.cookie这个属性来读写cookie。
每一个cookie都是以一个名/值对的形式存在,设置的时候,可以根据我们需求,给cookie添加不同的属性值,例如我们可以这样设置:document.cookie="testCookie=123";这样我们设置了一个名为testCookies,值为123的cookie。
又比如,我们想要在某个cookie上加一个过期时间,超过这个时间cookie将自动消失,例如:document.cookie="testCookie=123;expires=dateGMT";其中dateGMT 是Date类型的GMT_String格式。
如果当我们设置的cookie已经存在于客户端中时,则会将已经存在的cookie覆盖掉。
有趣的是:当我们设置cookie的时候,我们是直接给document.cookie这个属性赋值,而我们直接读取这个属性的时候是获取到了所有cookie。
3、删除cookie
//删除cookie
function delcookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null){
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
}
这里删除cookie,其实是cookie过期时间的另外一种用法,当我们将cookie的过期时间设置的比当前时间早的时候,cookie将被客户端自动销毁。
三、cookie限制和弊端
因为cookie是存储客户端的计算机上的,为了不让cookie不被恶意使用,浏览器加入了一些针对于cookie限制(单个域名):
1、数量:20个(不同的浏览器数量有所不同,ie7已下20个,ie7以上、Firefox50个)
2、大小:大多数浏览器都限制在 4095B 以内。
3、清理机制:当cookie的数量或大小超过浏览器的限制之后,浏览器将会清除以前设置的cookie腾出空间给新设置的cookie。在IE和Opera 会清理近期最少使用的cookie,Firefox会随机清理cookie。
cookie也有缺陷,cookie做为存储在客户端的会话信息,当我们给某个域名发送请求时,也会将该域名下的cookie携带发送给服务器,这不可避免的占用了我们一部分网路资源,造成浪费。
寄语:请合理使用cookie,避免资源浪费和性能。cookie并不是存储在一个安全的环境中,所以一定不要存储重要的数据。