cookie~session & web-storage1、产生原因由于http（超文本传输语言）是一种无状态协议，不

1、产生原因

由于http（超文本传输语言）是一种无状态协议，不能以状态来区分管理请求和响应。为了解决这一问题 cookie & session 应运而生

2、cookie & session

它们都是由服务端生成

cookie保存在客户端（硬盘或内存中），可以通过分析本地cookie模拟，安全性较差
大小限制为4KB左右（不同浏览器会有差别）
cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据。；
可以通过 set-cookie : path=/ ，来设置cookie的访问路径，非路径下无法访问
可以设置有效期

session

session保存在服务端内存中，安全性较好，但是对于用户较多的网站，服务端内存压力较大
大小无限制
session中能够存储任何类型的数据，包括且不限于string，integer，list，map等
不能设置路径，任何地方都可以访问到
session依赖于客户端cookie，如果客户端禁用cookie则需要重写url，增加了风险性
session有效期依赖于名为JSESSIONID的cookie，而cookie JSESSIONID的过期时间默认为-1，只需关闭窗口该session就会失效，因而session不能达到长期有效的效果。

3、web-storage

web-storage包括localStorage和sessionStorage，他们只能存储字符串类型数据。

localStorage

localStorage 是 HTML5 标准中新加入的技术，它存储在客户浏览器端，除非被删除否则永久有效

sessionStorage

sessionStorage 与 localStorage 类似，区别在于保存数据的生命周期不同。在页面会话期间可用，当前页面关闭后sessionStorage 中的数据就会被清空。

差异表

4、操作方法

cookie

var cookie = {
    set:function(key,val,time){//设置cookie方法
        var date = new Date(); //获取当前时间
        var expiresDays = time;  //将date设置为n天以后的时间
        date.setTime(date.getTime()+expiresDays*24*3600*1000); //格式化为cookie识别的时间
        document.cookie=key + "=" + val +";expires="+date.toGMTString() + ";path=/";  //设置cookie
        //即document.cookie= name+"="+value+";path=/";   时间可以不要，但路径(path)必须要填写，因为JS的默认路径是当前页，如果不填，此cookie只在当前页面生效
    },
    get:function(key){//获取cookie方法
        /*获取cookie参数*/
        var getCookie = document.cookie.replace(/[ ]/g,"");  //获取cookie，并且将获得的cookie格式化，去掉空格字符
        var arrCookie = getCookie.split(";")  //将获得的cookie以"分号"为标识 将cookie保存到arrCookie的数组中
        var tips;  //声明变量tips
        for(var i=0;i<arrCookie.length;i++){   //使用for循环查找cookie中的tips变量
            var arr=arrCookie[i].split("=");   //将单条cookie用"等号"为标识，将单条cookie保存为arr数组
            if(key==arr[0]){  //匹配变量名称，其中arr[0]是指的cookie名称，如果该条变量为tips则执行判断语句中的赋值操作
                tips=arr[1];   //将cookie的值赋给变量tips
                break;   //终止for循环遍历
            }
        },
      delete:function(key){ //删除cookie方法
         var date = new Date(); //获取当前时间
         date.setTime(date.getTime()-10000); //将date设置为过去的时间
         document.cookie = key + "=v; expires =" +date.toGMTString();//设置cookie
        }
        return tips;
    }
}

使用方式：

cookie.get("key");    //获取cookie
cookie.set("key",value,1);    //设置为1天过期

jQuery cookie

需要先引入jquery 与 jquery.cookie

添加会话cookie :

$.cookie('the_cookie','the_value');
//这里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止
//所以被称为 “会话cookie（session cookie）”

创建一个cookie并设置有效时间为 7天

$.cookie('the_cookie', 'the_value', { expires: 7 });
//这里指明了cookie有效时间，所创建的cookie被称为“持久 cookie （persistent cookie）”
//注意单位是天

创建一个cookie并设置 cookie的有效路径

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
//在默认情况下，只有设置 cookie的网页才能读取该 cookie。
//如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。
//cookie的路径用于设置能够读取 cookie的顶级目录。
//将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）

读取cookie

$.cookie('the_cookie');

删除cookie

$.cookie('the_cookie', null);   //通过传递null作为cookie的值即可

可选参数说明:

$.cookie('the_cookie','the_value',{
     expires:7,  
     path:'/',
     domain:'jquery.com',
     secure:true
})　
//expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期
//path：（String）创建该Cookie的页面路径
//domain：（String）创建该Cookie的页面域名
//secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS

localStorage

存： localStorage.setItem("key", "value")

取：let val = localStorage.getItem("key")

删：localStorage.removeItem("key")

全删：localStorage.clear()

sessionStorage

存： sessionStorage.setItem("key", "value")

取：let val = sessionStorage.getItem("key")

删：sessionStorage.removeItem("key")

全删：sessionStorage.clear()