内容简介：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代码，从而达到目的。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
