jQuery+Ajax 笔记 - cookie

写在前面： 此博客记录自己学习jQuery学习笔记，如有侵权，联系删！
学习来源： 李南江亲授-jQuery+Ajax从放弃到知根知底
李南江老师各平台账号：

• 微博：极客江南
• 微信公众号：李南江
• 腾讯课堂： 李南江
• 网易云课堂：李南江

cookie: 会话跟踪技术 客户端
session: 会话跟踪技术 服务端

cookie作用: 将网页中的数据保存到浏览器中

cookie生命周期:

• 默认情况下生命周期是一次会话(浏览器被关闭)
• 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
• 如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据

cookie注意点:

• cookie默认不会保存任何的数据
• cookie不能一次性保存多条数据, 要想保存多条数据,只能一条一条的设置
• cookie有大小和个数的限制
• 个数限制: 20~50
• 大小限制: 4KB左右

cookie作用范围:

• 同一个浏览器的同一个路径下访问
• 如果在同一个浏览器中, 默认情况下下一级路径就可以访问
• 如果在同一个浏览器中, 想让上一级目录也能访问保存的cookie, 那么需要添加一个path属性才可以;
  document.cookie = “name=zs;path=/;”;

例如:
保存到了www.it666.com/jQuery/Ajax/路径下,
我们想在 www.it666.com/jQuery/Ajax/13-weibo/,
和 www.it666.com/jQuery/ 路径下也能访问

例如:
我们在www.it666.com下面保存了一个cookie,
那么我们在edu.it666.com中是无法访问的
如果想在edu.it666.com中也能访问, 那么我们需要再添加一个domain属性才可以;
document.cookie = “name=zs;path=/;domain=it666.com;”;

cookie的创建

创建一个cookie

document.cookie = "name=lnj;";

再对cookie进行查询

alert(document.cookie);

才能查询到cookie

注意：
1、如果没有创建cookie就输出cookie，浏览器是找不到cookie的

alert(document.cookie);

查询出来就是空的，弹窗没有任何显示

2、不能一次性创建多个cookie

document.cookie = "name=lnj;age=33;gender=male;";

运行后就只能创建第一个cookie，后面的数据被删除了

cookie的生命周期

默认情况下，不给cookie设置失效时间，浏览器关闭后，cookie便会失效

设置cookie
cookie一天后失效：设置失效时间为一天后

var date = new Date();
date.setDate(date.getDate() + 1);
document.cookie = "age=33;expires="+date.toGMTString()+";";

cookie立即失效：设置失效时间为一天前

var date = new Date();
date.setDate(date.getDate() - 1);
document.cookie = "age=33;expires="+date.toGMTString()+";";

cookie的路径

默认情况下: cookie只能在同一个浏览器的同一个路径下访问

/jQuery/Ajax/

以及下一级路径就可以访问

/jQuery/Ajax/13-weibo/

如果想在同一浏览器的上级路径也能访问，那么我们需要再添加一个domain属性才可以(可以访问该Cookie的域名)

document.cookie = "name=zs;path=/;domain=it666.com;";

那么，我们在该域名的任意位置都可访问cookie

cookie的封装

添加cookie方法的封装

location.pathname设置或返回当前 URL 的路径部分

function addCookie(key, value, day, path, domain) {
	// 1.处理默认保存的路径
    // if(!path){
    //     var index = window.location.pathname.lastIndexOf("/")
    //     var currentPath = window.location.pathname.slice(0, index);
    //     path = currentPath;
    // }
    var index = window.location.pathname.lastIndexOf("/");// 当前路径用“/”将分隔开来并截取最后一个“/”
    var currentPath = window.location.pathname.slice(0, index);// 截取0到最后一个“/”部分
    path = path || currentPath;  //如果传入了路径就用传入的路径，不然就用当前处理过的路径
    // 2.处理默认保存的domain
    domain = domain || document.domain;//如果传入了域名就用传入的域名，不然就用当前域名
    // 3.处理默认的过期时间
    if(!day){
        document.cookie = key+"="+value+";path="+path+";domain="+domain+";";
    }else{
        var date = new Date();
        date.setDate(date.getDate() + day);
        document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";
    }
}

调用设置cookie

addCookie("score", "998", 1, "/", "127.0.0.1");

获取cookie方法的封装

function getCookie(key) {
	// console.log(document.cookie);
    var res = document.cookie.split(";");//将当前的cookie用“；”分隔开来
    // console.log(res);
    // 遍历出cookie的键值对
    for(var i = 0; i < res.length; i++){
        // console.log(res[i]);
        var temp = res[i].split("=");
        // console.log(temp);
        if(temp[0].trim() === key){
            return temp[1];
        }
    }
}

调用获取cookie

console.log(getCookie("name"));

删除cookie方法的封装

function delCookie(key, path) {
	addCookie(key, getCookie(key), -1, path);
}

调用删除cookie

delCookie("name", "/");