cookie

cookie

本地缓存技术：
1.用户名和密码自动登录
2.看视频，视频的播放进度
3.玩网页游戏，游戏设置

cookie的特点

1.最大只有4kb
2.数据有限制，一个域名下，最多只能存储50条数据
3.有时效性，可以设置过期时间
4.有域名的限制，你设置谁能读取，才能读取

cookie的组成部分

name=value;[expires=date];[path=path];[domain=somewhere.com];[secure] 实际上cookie是一串字符串
必选项：name和value；
可选项：中括号中的里面的参数。
【注】
1.火狐浏览器支持本地缓存cookie
2. 谷歌浏览器不支持本地缓存cookie，谷歌浏览器想要缓存cookie
3. 必须使用http或者https协议加载，必须通过服务器缓存cookie。
4. 如果大家想要设置中文不乱码，我们可以通过编码进行存储，通过解码进行读取，encodeURIComponent 将中文编码成字符，decodeURIComponent 将字符解码转成中文。

cookie的可选项

expires 过期时间
【注】设置cookie的过期时间的，赋值必须是日期对象，如果过期，系统会自动清除过期的cookie。
【注】如果不设置这个值，默认是"会话"，一次会话(打开浏览器-关闭浏览器)
【注】主动删除cookie，设置cookie时间是过去的时间。
设置cookie

document.cookie = 'username=firstcookie;expires=' + afterOfDate(7);

            //封装函数，获取n天后的时间
            function afterOfDate(n){
                var d = new Date();
                var day = d.getDate();
                d.setDate(day + n);
                return d;
            }

删除cookie

document.cookie = 'username=;expires=' + new Date(0);

path 限制访问路径
【注】如果不去设置，默认就是当前文件加载的路径。
【注】如果设置的cookie的路径，和实际加载文件的路径不一致，禁止访问cookie。
domain 限制访问域名
【注】如果不去设置，默认就是当前加载文件的主机名。

封装cookie

目的：为了防我们操作cookie以后可以方便一点。
我们可以针对于cookie的操作进行封装函数：
setCookie() 设置cookie
getCookie() 通过name获取对应的值
removeCookie() 删除cookie

//通过一个函数，将三个函数功能合体
function $cookie(name){
    //arguments
    switch(arguments.length){
        case 1:
            return getCookie(name); //获取cookie
            break;
        case 2:
            arguments[1] == null ? removeCookie(name) : setCookie(name, arguments[1], {});
            break;
        case 3:
            setCookie(name, arguments[1], arguments[2]);
            break;
        default:
            break;
    }
}


//设置cookie    expires 用户传入天数
function setCookie(name, value, {expires, path, domain, secure}){
    //1、拼接字符串
    var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);
    //2、判断可选项是否存在
    if(expires){
        cookieStr += ";expires=" + afterOfDate(expires);
    }
    if(path){
        cookieStr += ";path=" + path;
    }
    if(domain){
        cookieStr += ";domain=" + domain;
    }
    if(secure){
        cookieStr += ";secure";
    }

    //3、将字符串设置cookie
    document.cookie = cookieStr;

}

//封装函数，获取n天后的时间
function afterOfDate(n){
    var d = new Date();
    var day = d.getDate();
    d.setDate(day + n);
    return d;
}





//通过传入name获取对应的值
function getCookie(name){
    var cookieStr = decodeURIComponent(document.cookie);
    //1、先去查找这个name第一次出现的位置
    var start = cookieStr.indexOf(name + "=");
    if(start == -1){
        return null;
    }else{
        //2、找结束的位置
        var end = cookieStr.indexOf(";", start);
        if(end == -1){
            end = cookieStr.length;
        }

        //通过start和end这两个部分，去提取对应的键值对
        var str = cookieStr.substring(start, end);
        var arr = str.split("=");
        return arr[1];
    }
}


function removeCookie(name){
    //name=;
    document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}

jQuery中cookie的操作

jquery.cookie方法需要单独引入，jquery.cookie依赖于jquery开发

<script src = 'jquery-1.10.1.min.js'></script>
<script src = 'jquery.cookie.js'></script>

具体操作：
$.cookie(name, value) //获取
$.cookie(name, value, {可选项});
expires
path
domain
安全
raw（false //设置值，编码 默认编码 || true //设置值，不编码）
$.cookie(name, null) 删除