cookie、session、SessionStorag和LocalStorage的概念讲解

1>Cookie：

1.概念：

cookie机制其实就是在客户端保持状态的方案，cookie又叫会话跟踪机制。打开一次浏览器到关闭浏览器算是一次会话。cookie可以跟踪会话，弥补HTTP无状态协议的不足。

Cookie由键值对构成是由服务器创建，然后通过响应发送给客户端。客户端会保存Cookie，并会标注出Cookie的来源（哪个服务器的Cookie）。当客户端向服务器发出请求时会把所有这个服务器Cookie包含在请求中发送给服务器，这样服务器就可以识别客户端了。在js中cookie以字符串的形式保存在浏览器中。

2.http中cookie

1》请求头，客户端发送给服务器端；

格式：Cookie:a=A;b=B;c=C。即多个Cookie用分号离开；

2》响应头，服务器端发送给客户端

一个Cookie对象一个Set-Cookie：

Set-Cookie:a=A

Set-Cookie:b=B

Set-Cookie:c=C

3》Cookie的覆盖

如果服务器端发送重复的Cookie那么会覆盖原有的Cookie，例如客户端的第一个请求服务器端发送的Cookie是：Set-Cookie:a=A；第二请求服务器端发送的是：Set-Cookie:a=AA，那么客户端只留下一个Cookie，即：a=AA。

3.js中cookie设置

cookie的几种常见属性：name(名称)、value(值)、expires(过期时间)、path(路径)、domain(域)、secure(安全)，其中后四个是可选的。

document.cookie=’userName=wangjunjie’。

1、名和值：名用来引用cookie，值是cookie的信息部分，这两部分是必选的。

设置cookie的名值：document.cookie=’userName=wangjunjie’。

2、过期时间：如果cookie不设置expires，用户关闭浏览器后cookie过期，下次打开浏览器时该cookie不复存在。过期时间的格式是非常重要的，对于IE浏览器尤为重要，它应该与toGMTString()给出的格式相同。

3、路径：站点里有两个目录~/A和~/B，~/B中设置的cookie可以在它的目录及其子目录下访问，不能在~/A中访问，如果想在站点里的任何地方访问~/B中设置的cookie，则需要把path设置为’/'。

设置cookie的路径：document.cookie=’userName=wangjunjie;path=/’;

4.域：默认情况下cookie仅用于设置它的域下面的页面，假设现在有两个站点a.blog.com和b.blog.com，在a.blog.com下设置的cookie不能在b.blog.com下访问，反之也是这样，如果想在两个站点下都访问这个cookie需要该domain值。

设置cookie的域：document.cookie=’userName=wangjunjie;domain=blog.com’;

5、安全：cookie的最后一部分是一个Boolen值，默认为false，总是发送cookie，不考虑安全性，如果设置为true，则cookie仅发送给尝试使用安全通道检索它的Web服务器。

4.cookie代码

    //设置cookie
	function setCookie(name,value,days){
		var d = new Date();
		d.setTime(d.getTime() + (days*24*60*60*1000));
		var expires = 'expires=' +d.toGMTString();
		document.cookie=name+'='+value+';'+expires;

	}
	setCookie('shisha',18,1)
    //获取cookie
    function getCookie(cname){
    	var name = cname + '=';
    	var ca =document.cookie.split(';');
    	for(var i = 0;i
2>session
1.概念：
客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了。如果说Cookie机制是通过检查客户身上的“通行证”来确定客户身份的话，那么Session机制就是通过检查服务器上的“客户明细表”来确认客户身份。Session相当于程序在服务器上建立的一份客户档案，客户来访的时候只需要查询客户档案表就可以了。比如张三和李四分别访问该网站，在服务端会产生两个SessionID来区分该用户，而在客户端将对应的SessionID存放在Cookie中，以便我们再次访问时得到我们所需的资源。
2.解决的问题：
session解决的问题和cookie一样，比如：我在www.a.com/login.php里面登陆了，我在www.a.com/index.php 也希望是登陆状态，但是这是2个不同的页面，也就是2个不同的HTTP请求，这2个HTTP请求是无状态的，也就是无关联的，所以无法单纯的在index.php中读取到它在login.php中已经登陆了。这是候就出现了cookie，cookie是把少量的信息存储在用户自己的电脑上，它在一个域名下是一个全局的，只要设置它的存储路径在域名www.a.com下 ，那么当用户用浏览器访问时，就可以从这个域名的任意页面读取cookie中的信息。所以就很好的解决了我在www.a.com/login.php页面登陆了，我也可以在www.a.com/index.php获取到这个登陆信息了。同时又不用反复去查询数据库。但是由于cookie 是存在用户端，而且它本身存储的尺寸大小也有限，最关键是用户可以是可见的，并可以随意的修改，很不安全。这时候session就出现了session 他解决了在一次会话中2次HTTP的请求的关联，让它们产生联系，让2两个页面都能读取到找个这个全局的session信息。session信息存在于服务器端，所以也就很好的解决了安全问题。
3>cookie和session的区别
1、cookie数据存放在客户的浏览器上，session数据放在服务器上 

2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗， 考虑到安全应当使用session 

3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，考虑到减轻服务器性能方面，应当使用COOKIE
4、单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能3K
4>Cookie、SessionStorag、LocalStorage
共同点：
Cookie、SessionStorag、LocalStorage都是在浏览器端存储的数据，且为同源的。
区别:
1.传输：
cookie数据始终在同源的http请求中携带（即使不需要）。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2.存储大小：
cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.保存时间：
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，除非主动删除数据，否则数据是永远不会过期的。因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。如果不设置默认浏览器关闭失效。
4.作用域不同：
不同页面或标签页间无法共享sessionStorage的信息，sessionStorage为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5>localStorage和sessionStorage使用时使用相同的API
通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本
localStorage.setItem("name","value");//以“name”为名称存储一个值“value”
localStorage.getItem("name");//获取名称为“name”的值
localStorage.removeItem("name");//删除名称为“name”的信息。
localStorage.clear();//清空localStorage中所有信息
枚举localStorage的方法：
for(var i=0;i