1、Cookie

1.1、cookie内容

主要包括

名字
值
过期时间
路径
域

1.2 、cookie特点

cookie保存在客户端，服务器能够知道其中的信息
cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑安全应当使用session
cookies由服务端创建，发送给浏览器端，当用户发出请求后，带上cookie发送给服务端做验证
来回传递过程中，占用带宽，消耗网络资源,并且容易被中间人获取或浏览器端用户篡改十分不安全
cookie中如果设置了路径参数，那么同一个网站中不同路径下的cookie互相是无法访问（同源）
cookies大小只有4k，cookie只能保存字符串类型，以文本的方式；很多浏览器都限制一个站点最多保存20个cookie
针对cookie所存在的攻击：Cookie欺骗，Cookie截获

1.3、cookie机制

若不设置时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就会消失。这种cookie被称为会话cookie。会话cookie一般不存储在硬盘而是保存在内存里，当然这个行为并不是规范规定的。
若设置过期时间，浏览器就会把cookie保存到硬盘上，关闭后再打开浏览器这些cookie仍然有效直到超过设定的过期时间。对于保存在内存里的cookie，不同的浏览器有不同的处理方式session机制。

1.4、应用场景

判断用户是否登陆过网站，以便下次登录时能够实现自动登录（记住密码）。删除cookie，每次登录重新填写登录的信息
保存上次登录的时间等信息。
保存上次查看的页面
浏览计数

1.5、cookie常用方法

设置cookie

    /**
     * [setJSCookie 页面上设置一个cookie]
     * @param {[type]} name    [cookie name]
     * @param {[type]} value   [cookie value]
     * @param {[type]} expires [cookie 有效期限 Date]
     * @param {[type]} path    [可选URL]
     * @param {[type]} domain  [可选域]
     * @param {[type]} secure  [可选安全标志secure布尔值]
     */
var setJSCookie = function(name, value, expires, path, domain, secure) {
        //对cookie name和cookie value进行URL编码
        var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
        if (expires instanceof Date) {
            //expires参数格式化Date对象
            cookieText += ": expires=" + expires.toGMTString();
        }
        if (path) {
            cookieText += ";path=" + path;
        }
        if (domain) {
            cookieText += ";domain=" + domain;
        }
        if (secure) {
            cookieText += ";secure";
        }
        document.cookie = cookieText;
    }

获取cookie

var getJSCookie = function(name) {
        var cookieName = encodeURIComponent(name) + "=",
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        //查找cookie名上加等号的位置
        if (cookieStart > -1) {
            //存在等号，继续查找第一个分号的位置
            var cookieEnd = document.cookie.indexOf(";", cookieStart);
            //没找到分号，表示该cookie是字符串中最后一个
            //余下的字符串都是cookie的值
            if (cookieEnd == -1) {
                cookieEnd = document.cookie.length;
            }
            //使用decodeURIComponent()进行解码
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
        }
        //返回cookie，不存在则返回null
        return cookieValue;
    }

删除cookie

//通过覆盖的方式完成cookie删除效果
var resetCookie = function(name, path, domain, secure) {
      this.set(name, "", new Date(0), path, domain, secure);
}

2、session

2.1、session特点

session 保存在服务端，不会被发送到浏览器所以很安全，客户端不知道其中的信心；
session不能区分路径，同一个用户在访问一个网站期间，session存在同一网站不同页面之中
session主要用于服务端保存请求信息的机制
session中保存的是对象，session通过数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

2.2、session机制

当服务器收到某个客户端的请求请求需要创建session对象时，服务器首先检查这个客户端的请求里是否已包含了一个session标识——session id，session id是加密的。

如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用
如果客户端请求不包含session id，则为客户端创建一个session并且生成一个与此session相关联的session id

session id的值：不会重复，无规律的字符串，这个session id将被在本次响应中返回给客户端保存。

保存这个session id的方式可以采用cookie，在交互过程中浏览器可以自动的按照规则将sessionid发送给服务器

用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为
当浏览器支持Cookie时，url不做任何处理
当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

2.3 、session 应用场景

Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。

网上商城中的购物车
保存用户登录信息
将某些数据放入session中，供同一用户的不同页面使用
防止用户非法登录

3、sessionStorage

3.1、 sessionStorage 特点

sessionStorage仅在当前浏览器窗口关闭之前有效
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
存放数据大小一般为5M
数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信
可以用源生接口，也可再次封装来对Object和Array有更好的支持
保存在浏览器端

3.2、 sessionStorage 应用场景

单页面应用数据修改、状态保存，刷新页面或进入同源的不同页面，数据不重置

3.3、sessionStorage 常用方法

检测sessionStorage

window.sessionStorage

添加sessionStorage

sessionStorage.setItem("key","123");

//第2个参数做 JSON.stringfy()  处理

获取sessionStorage

sessionStorage.getItem("key");

获取后 做 JSON.parse()  处理

删除单个sessionStorage

sessionStorage.removeItem("key");

清除所有sessionStorage

sessionStorage.clear();

4、localStorage

4.1、 localStorage 特点

除非数据被清除，否则一直存在
数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信
可以用源生接口，也可再次封装来对Object和Array有更好的支持
保存在浏览器端

4.2、 localStorage 应用场景

单页面应用数据修改、状态保存，路由跳转刷新不同页面，数据不重置

4.3、localStorage 常用方法

检测localStorage

window.localStorage

添加localStorage

localStorage.setItem("key","123");

//第2个参数做 JSON.stringfy()  处理

获取localStorage

localStorage.getItem("key");

//获取后 做 JSON.parse()  处理

删除单个localStorage

localStorage.removeItem("key");

清除所有localStorage

localStorage.clear();

4.4、storage事件

if(window.addEventListener){ 
    window.addEventListener("storage",handle_storage,false); 
}else if(window.attachEvent){ 
    window.attachEvent("onstorage",handle_storage); 
} 

function handle_storage(e){
    if(!e){
        e=window.event;
    } 
}

cookie、session、sessionStorage、localStorage区别