文章目录

  • 1、简介:
  • 2、机制的区别:
  • 3、cookie的分类:
  • 4、cookie的使用
  • (1)创建和存储cookie。
  • (2)读取cookie值:
  • (3)判断cookie是否存在
  • 使用cookie记住密码
  • Cookie满足同源策略


1、简介:

cookie cookie是由服务器发送给客户端(浏览器)的小量信息,是存储于用户的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。可以使用 JavaScript或者jQuery 来创建和读取cookie 的值。

客户端请求服务器时,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。而客户端浏览器会把Cookie保存起来。当浏览器再请求服务器时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器通过检查该Cookie来获取用户状态

Cookie 是个存储在浏览器目录的文本文件,当浏览器运行时存储在 RAM 中。一旦你从该网站或网络服务器退出,Cookie 也可存储在计算机的硬驱上。当访客结束其浏览器对话时,即终止的所有 Cookie。

cookie 应用举例:
当用户首次访问页面时,页面或许会要求填写用户的用户名和密码。用户名和密码可以被存储于 cookie 中。当他们再次访问网站时,用户名和密码就会从 cookie 中取回,无需用户再去重新输入。

Cookie是由HTTP服务器设置的,保存在浏览器中,但HTTP协议是一种无状态协议,在数据交换完毕后,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接。


IE 6.0

IE 7.0 8.0


Opera

Fire Fox

Safari

Chrome

Cookie个数

每个域名下20个

每个域名下50个

每个域名30个

每个域名50个

没有限制

每个域名53个

Cookie大小

4095字节

4095字节

4096字节

4097字节

4097字节

4097字节

2、机制的区别:

session机制采用的是在服务器端保持状态的方案,而cookie机制则是在客户端保持状态的方案cookie又叫会话跟踪机制。打开一次浏览器到关闭浏览器算是一次会话。说到这里,讲下HTTP协议,前面提到,HTTP协议是一种无状态协议,在数据交换完毕后,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接。此时,服务器无法从链接上跟踪会话cookie可以跟踪会话,弥补HTTP无状态协议的不足。

3、cookie的分类:

cookie分为会话cookie持久cookie

  • 会话cookie是指在不设定它的生命周期expires时的状态,前面说了,浏览器的开启到关闭就是一次会话,当关闭浏览器时,会话cookie就会跟随浏览器而销毁。当关闭一个页面时,不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时,单一的买卖过程,离开之后,信息则销毁。
  • 持久cookie则是设定了它的生命周期expires,此时,cookie像商品一样,有个保质期,关闭浏览器之后,它不会销毁,直到设定的过期时间。对于持久cookie,可以在同一个浏览器中传递数据,比如,你在打开一个淘宝页面登陆后,你在点开一个商品页面,依然是登录状态,即便你关闭了浏览器,再次开启浏览器,依然会是登录状态。这就是因为cookie自动将数据传送到服务器端,在反馈回来的结果。持久cookie就像是我们办理了一张积分卡,即便离开,信息一直保留,直到时间到期,信息销毁。

4、cookie的使用

cookie以字符串的形式保存在浏览器中。cookie的几种常见属性:document.cookie="

  • key=value;
  • expires=失效时间;
  • path=路径;
  • domain= 域名;
  • secure;(secure表安全级别),
  • raw: 默认值:false。 默认情况下,读取和写入 cookie 的时候自动进行编码和解码(使用encodeURIComponent 编码, decodeURIComponent 解码)。
(1)创建和存储cookie。
// 函数中的参数分别为 cookie 的名称、值以及过期天数
function setCookie(c_name,value,expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +escape(value)+
    ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
setCookie('name','zzyn',1); // cookie过期时间为1天。
 
// 如果要设置过期时间以秒为单位
function setCookie(c_name,value,expireseconds){
    var exdate=new Date();
    exdate.setTime(exdate.getTime()+expireseconds * 1000);
    document.cookie=c_name+ "=" +escape(value)+
    ((expireseconds==null) ? "" : ";expires="+exdate.toGMTString())
}
setCookie('name','zzyn',3600);  //cookie过期时间为一个小时
(2)读取cookie值:

// 函数中的参数为 要获取的cookie键的名称。

function getCookie(c_name){
    if (document.cookie.length>0){
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1){
            c_start=c_start + c_name.length+1;
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1){ 
                c_end=document.cookie.length;
            }
 
            return unescape(document.cookie.substring(c_start,c_end));
        }
     }
 
    return "";
}
var uname= getCookie('name');
console.log(uname);
(3)判断cookie是否存在
// 函数中的参数为,要判断的cookie名称
 function checkCookie(c_name){
    username=getCookie(c_name);
    if (username!=null && username!=""){
        // 如果cookie值存在,执行下面的操作。
        alert('Welcome again '+username+'!');
    }else{
        username=prompt('Please enter your name:',"");
        if (username!=null && username!=""){
            //如果cookie不存在,执行下面的操作。
            setCookie('username',username,365)
        }   
    }
}
使用cookie记住密码
  • 方案1:
    直接把用户名与密码都保持到Cookie中,下次访问时检查Cookie中的用户名与密码,与数据库比较。这是一种比较危险的选择,一般不把密码等重要信息保存到Cookie中。
  • 方案2:
    密码加密后保存到Cookie中,下次访问时解密并与数据库比较。这种方案略微安全一些。如果不希望保存密码,还可以把登录的时间戳保存到Cookie与数据库中,到时只验证用户名与登录时间戳就可以了。
  • 方案3:
    实现方式是把密码按照一定的规则(密钥)加密后,连同账号一块保存到Cookie中。下次访问时只需要判断账号的加密规则是否相同即可。
Cookie满足同源策略

虽然网站images.google.com与网站www.google.com同属于Google,但是域名不一样,二者同样不能互相操作彼此的Cookie。

问题来了 举个例子:

  • 访问玩zhidao.baidu.com 再访问wenku.baidu.com还需要重新登陆百度账号吗?
  • 解决办法: 设置document.domain = ‘baidu.com’;
  • 让页面属于这个基础域名下(那么此页面和任何二级域名为baidu.com的)