cookie总结

内容简介：cookie总结

cookie的出现是用来弥补HTTP的短板的,由于HTTP是一种无状态,无链接的协议(通俗说不具备记忆能力),也就是说用户在浏览器上请求一个动作时候,服务器是不知道用户上一步做了什么,因此要对一些信息进行存储就很麻烦.cookie就是用来满足大部分状态存储的需求.

cookie本身就是一段存储在客户端(浏览器)的文本.我们可以在前端通过JS来修改cookie,也可以在服务器端响应返回时候设置cookie.

理解cookie是如何进行工作的(存储)?

场景:我们在自己的项目中记录用户的用户名与密码.

当我们在登录页面时候输入了用户名与密码,并且通过验证时候,服务器端会在响应客户端的HTTP包的包头里面含有一个Set-Cookie字段,这个字段就是服务器分配给你的标识符.如name=xyz,并且这段文本会保存在你的电脑的磁盘里面.当你继续浏览该网站的其他页面时候,每次的HTTP请求中都会带着cookie字段,,服务器就就可以确定这个请求来自登录后的你.

当你浏览器别的网站时候(如百度),这个时候之前那个cookie是被限制的.这个限制便来自于域.不同域之间的cookie是互不影响,不可以访问.因此域限制是保证cookie安全的基础.

另外cookie的名称是不区分大小写.

##### 理解cookie的路径(path)概念

cookie一般都是由于用户在访问页面时候被创建的,但是并不是只有在被创建的那个页面才可以访问cookie,默认情况下由于安全考虑,只有与创建cookie的那个页面处于同一个目录或者在创建cookie那个页面的子目录下的页面才可以访问(同源策略).但是如果我们需要其上层父级或者整个网页范围都可以访问那个cookie.就需要进行路径的设置.

path就是表示cookie所在的那个目录,.net默认为/，就是根目录.

场景分析: 在同一个服务器上有目录如下： /test/ , /test/cd/ , /test/dd/ .现假设一个cookie1的path为/test/，cookie2的path为/test/cd/,那么test下的所有页面都可以访问到cookie1,而/test/和/test/dd/的子页面不能访问cookie2。这是因为cookie能让其path路径下的页面访问。

解决办法: 设置cookie2可以被其他目录访问

document.cookie = "name = value; path=/";
设置path字段为根目录.

理解cookie的域概念

domain用来表示cookie所在的域,默认为请求的地址,假设一个网站为www.jb51.net/test/test.aspx,则其domain默认为www.jb51.net.而理解跨域访问呢,如域A为t1.test.com，域B为t2.test.com,如果我们需要在域A中生成一个在域A与域B都可以访问的cookie,那么就要把这个cookie的domain设置为.test.com.如果是在域A生成一个在域A不可以访问,在域B可以访问的cookie,只要在其cookie设置domain为t2.test.com.

cookie的基本操作

• 获取一个完整的cookie

document.cookie

console.log(document.cookie)
"_xsrf=45fe7905adb3e16c72955fcf5cced0d1; s-q=%E5%A6%82%E4%BD%95%E5%AD%A6%E4%B9%A0PS; s-i=2;"

输出的由分号分割的名值对组成的字符串.

• 设置一个cookie

document.cookie

document.cookie="name=kobe;age=30"

值得注意的是你设置的这个cookie是不会覆盖之前的,而是添加在之前的后面.

• 对cookie操作的封装

getCookie()

function getCookie(name){
    var cookieName = encodeURIComponent(name) + "=", //编码name
        cookieStart = document.cookie.indexOf(cookieName), // 获取编码后的name的起始索引值
        cookieValue = null , // 设置初始值为null
        cookieEnd;
    if(cookieStart > -1){
        cookieEnd = document.cookie.indexOf(";",cookieStart); //设置cookieEnd从起始索引值下一个分号前.
        // 判断是否已经到结尾了
        if(cookieEnd == -1){
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
    }    
    return cookieValue;    
}

setCookie()

function setCookie(name , value,opt_expires,opt_path,opt_domain,opt_secure){
    var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value); //设置好格式

    if(opt_expires instanceof Date){
        // cookie过期时间只支持GMT格式
        cookieText += "; expires=" + opt_expires.toGMTString(); // 设置有效期
    }    

    if(opt_path){
        // opt_path表示cookie起作用的路径,如/path1下设置的cookie在/path2下是无法访问的.
        cookieText += "; path=" + opt_path;  //设置cookie路径 
    }

    if(opt_domain){
        // 只可以设置子域,不能跨根域
        cookieText += "; domain=" + opt_domain;
    }
    if(opt_secure){
        //安全标识,指定该标志后只有在使用SSL连接(https)时候才发送cookie.
        cookieText += "; secure";
    }

    document.cookie = cookieText;

}

delCookie()

function delCookie(name,path,domain,secure){
    setCookie(name,"",new Date(0) ,path,domain,secure)
}

cookie的缺点

• IE6及以下IE版本每个域最多20个cookie.
• IE7及其更高版本每个域最多50个cookie.
• 火狐最多每个域50个cookie.
• Opera每个域最多30个cookie.
• Webkit(Safari,Chrome)内核没有对cookie数量进行明确的限制,但是cookie太大超过HTTP头部大小限制会导致服务器无法处理.
• cookie的大小是有限制的,大多数浏览器限制在4096B。

对cookie的误解

• 错误的认为cookie是本地存储技术,其实每一次站点请求时候cookie都会被发送到服务器,如果太多数据保存在cookie中,一是会降低传输性能,二是有安全隐患

解决cookie跨域问题

• 了解nginx反向代理

反向代理（Reverse Proxy）方式是指以代理服务器来接受Internet上的连接请求，然后将请求转发给内部网络上的服务器；并将从服务器上得到的结果返回给Internet上请求连接的客户端，此时代理服务器对外就表现为一个服务器。

反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。客户端向反向代理 的命名空间(name-space)中的内容发送普通请求，接着反向代理将判断向何处(原始服务器)转交请求，并将获得的内容返回给客户端，就像这些内容 原本就是它自己的一样。

其实就是通过“欺骗”浏览器来实现的，通过nginx，我们可以将不同工程的cookie放到nginx域下，通过nginx反向代理就可以取到不同工程写入的cookie

• jsonp跨域

jQuery跨域

　JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

jsonp格式

如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

场景demo:

两个工程web1, web2, 部署在本地同一台机器上的不同tomcat上，端口分别是8080和8089。目录结构有web1/a.html,web2/b.html(用来生成web2下的cookie的页面),web2/cookie.jsp.我们想要的是在web1/a.html访问到web2/cookie.jsp.

$.ajax({
    type : "get" ,
    url: "http://localhost:8089/web2/cookie.jsp",
    dataType : 'jsonp',
    jsonp: "callback", //用来获得jsonp回调函数的参数名，默认为callback
    jsonpCallback : "success_jsonpCallback", // 自定义的jsonp回调函数名,默认为jQuery随机生成的函数名.
    success : function(json)
    {
        console.log(json)
    },
    error : function(data){
        console.log(data)    
    }

});

可以发现，jsonp会通过回调函数来处理服务器端返回的数据，因为返回的可以执行的js代码（也就是重写cookie的path和域），然后自动执行返回的js代码，从而达到目的。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

• 【Vue项目总结】后台管理项目总结
• JavaScript基础总结（四）——字符串总结
• Python 技巧总结
• VueConf 感想与总结
• 前端编码规范总结
• Js遍历数组总结

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。