什么是cookie

什么是cookie

1. cookie是浏览器提供的一种机制，可以由JavaScript对其进行操作(设置、读取、删除)
2. cookie是一种会话跟踪技术，是存储于访问者计算机中的一小块数据

cookie的特点

存储空间最大只有4kb
数据有限制，一个域名下，最多只能存储50条数据
有时效性，可以设置过期时间
有域名的限制，只有设置的域名才能读取
cookie不能跨域使用

         cookie在火狐浏览器下可以直接访问，在谷歌中只能在服务器环境下运行

cookie的缺点

cookie存储空间很小(只有4KB左右)
cookie操作麻烦，没有方便的API
cookie安全性不够高

cookie的使用

cookie是一个键值对的字符串，一共有5个参数
name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]

1. name和value为cookie的键和值，即存储的数据

//设置cookie：
document.cookie="user1=xh";
document.cookie="user2=xm";

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

var d=new Date();
d.setDate(d.getDate()+3); //按天数设置
document.cookie="user3=xd; expires="+d;

3. path设置目录，默认当前目录，如果设置的cookie的路径，和实际加载文件的路径不一致，禁止访问cookie。

document.cookie = 'username=xd;expires=' + afterOfDate(7) + ";path=" + "/day14/demo";

4. domain设置域名，默认当前域名，设置的域名和，加载文件的域名不一致的话，连cookie都加载不成功。

document.cookie = "username=tianyufei;domain=" + "127.0.0.2";

5. secure设置安全，默认是false。只支持通过https协议加载页面，去设置cookie。https协议的域名，最好是可以去买一个现成的，阿里云。
6. 读取cookie：
   var cookies = document.cookie;
   只能够一次获取所有的cookie值
   使用时必须自己解析这个字符串，来获取指定的cookie值
7. 删除cookie：
   cookie过期会自动消失
   要删除一个cookie，可将其有效期设为一个过去的时间

var d=new Date();
d.setDate(d.getDate()-1);
document.cookie="user1=xh; expires="+d;

cookie的封装

1. 设置cookie
   传入必须的name，value值，可选的全部放到一个对象里面，再判断可选项，然后设置cookie。

//设置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;
}

2. 获取cookie
   获取cookie即从cookie字符串中找到想要的cookie，可以使用字符串解析，以下是一种方法。

//通过传入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];
    }
}

3. 删除cookie

//传入name值再重新设置过期时间，即可删除
function removeCookie(name) {
    //name=;
    document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}