前端面试：精选经典面试题(二)

谈谈你对Cookie的理解

谈谈你对Cookie的理解

观察cookie的时候发现，是形如下列的形式:

console.log(document.cookie);

"lhb_smart_0=1; bdshare_firstime=1450019742837; __utma=226521935.305787741.1450019741.1450019741.1450085116.2; __utmz=226521935.14232.2.com|utmccn=(referral)|utmcmd=referral|utmcct=/Configure.aspx; Hm_lvt_67443032326a488580ec86aba288f7=1450081242,1450084552,1450169930,1450170162; CNZZDATA4343144=cnzz_eid%3D14832894-1450081695-null%26n741.1450044741"

这里返回的是当前页面可用的所有的cookie的字符串，而且是经过编码过的，必须使用encodeURIComponent()来编码。
所以我们一般会采用下面的类似代码来操作cookie:

var CookieUtil = {
//获取
get:function(name){
var cookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;

if(cookieStart > -1){
var cookieEnd = document.cookie.indexOf(";",cookieStart);
if(cookieEnd == -1){
cookieEnd = document.cookie.length;
}

cookieValue = decodeURIComponent(document.cookie.substring(cookieStart+cookieName.length,cookieEnd));
}

return cookieValue;
},
//创建
set:function(name,value,expires,path,domain,secyre){
var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

if(expires instanceof Date){
cookieText += ";expires="+expires.toGMTString();
}

if(path){
cookieText += ";path="+path;
}

if(domain){
cookieText += "; domain="+domain;
}

if(secure){
cookieText += "; secure";
}

document.cookie = cookieText;
},
//删除
unset:function(name,path,domain,secure){
this.set(name,"",new Date(0),path,domain,secure);
}
};

IE6或更低版本最多20个cookie

IE7和之后的版本最后可以有50个cookie。

Firefox最多50个cookie

chrome和Safari没有做硬性限制

IE和Opera 会清理近期最少使用的cookie，Firefox会随机清理cookie。

cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节。

IE 提供了一种存储可以持久化用户数据，叫做userdata，从IE5.0就开始支持。每个数据最多128K，每个域名下最多1M。这个持久化数据放在缓存中，如果缓存没有清理，那么会一直存在。

优点

通过良好的编程，控制保存在cookie中的session对象的大小。

通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点

Cookie

数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

额外

浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等