4 AJAX（cookie + hash）

hash：在浏览器地址栏后拼接#1
cookie定义：会话跟踪技术
cookie浏览器查看位置：
cookie参数：（key/value/过期时间/路径/域名）

hash：在浏览器地址栏后拼接#1

//1.新增hash
window.location.hash = 值;
//2.获取hash
window.location.hash.substring(1)  //截取#

cookie定义：会话跟踪技术：将数据保存在浏览器中

客户端	服务端	作用
cookie	session	将数据保存在浏览器中

cookie浏览器查看位置：

1.F12中
2.Application 里面
3.左侧找到cookie
4.时间参数： 找到cookie下的 get请求地址 里面的expires
5.路径参数： 找到cookie下的 get请求地址 里面的path

cookie参数：（key/value/过期时间/路径/域名）

定义： 设置key=value时需注意
（1）cookie只能一条一条新增设置，不能整合字符串多条设置
（2）不同的浏览器限制个数不同，20-50个不等
（3）保存数据大小有限制，4kb左右

参数	英文	默认	设置后
过期时间	day/expires	关闭浏览器清除，不关闭浏览器情况刷新浏览器一直在	关闭浏览器不清除，设置时间到期后删除
路径	path	向下兼容，下一级路径可以访问上一级路径的cookie	默认路径指向的是「当前网页对应的路径」
域名	domain	设置域名后会bug	设置后正常

定义

1.往cookie添加数据：key = value
2.设置自动关闭时间：expires
3.设置相同浏览器下所有文件都可以访问cookie，取消向下兼容问题：path
4.设置好域名，解决因域名访问不到cookie的BUG ：domin
var date = new Date();  //自动关闭时间
date.setDate(date.getDate() + day); //自动关闭时间
document.cookie = "key=value;path=/;domain=baidu.com;expires=" + date.toGMTString() + ";"

新增cookie封装

addCookie();  //调用
function addCookie(key, value, day, path, domain) {
    //1.处理默认保存路径
    if (!path) {
        //当前打开网页对应的路径 ,这个是客户端访问的方法，对应服务端就是req.url了
        //window.location.pathname   //打开网页的全路径
        var index = window.location.pathname.lastIndexOf("/")   //找到网页路径 “/”最后出现的位置
        var currentPath = window.location.pathname.slice(0, index)  //截取从0到“/”最后出现的位置，
        path = currentPath;
    }
    //2.处理默认保存的domain ,实参传递的是域名
    if (!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封装

//将key作为参数传入，输入结果为value
getCookie(键);
function getCookie(key) {
    document.cookie;   //获取所有cookie；
    var res = document.cookie.split(";")  //用分号将cookie字符串转化为数组
    for (i = 0; i < res.length; i++) {   //循环遍历数组
        var temp = res[i].split("=")   //将key和value区分开
        if (temp[0].trim() === key) {     //先把前后空格去除，后判断外部查询的key 和此key是否相同，相同输出value
            return temp[1];
        }
    }
}

删除cookie封装

delCookie(键, 路径);
function delCookie(key, path) {
    //1.定义：添加key与value相同的cookie，将过期时间调整为以前，就删除了，如果是默认路径参数2可以省略，如果新增时修改为"/"路径，需要将"/"作为参数传递
    //2.调用添加cookie方法
    //3.将要删除的key作为实参传递，value为调用getCookie()得到，
    //4.将时间设置为昨天
    addCookie(key, getCookie(), -1, path);
}