1. 添加

function addCookie(key, value, day, path, domain) {
    // 1.处理默认保存的路径
    var index = window.location.pathname.lastIndexOf("/")
    var currentPath = window.location.pathname.slice(0, index);
    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 + ";";
    }
}

虽然参数有很多，实际使用的时候并不需要这么麻烦。

最简单：addCookie("city","北京",); 这样就创建了一个Cookie，它的名字为city，值为北京

参数依此为：键名，键值，生存周期，有效路径，域名白名单

  • 键名：名称，不可修改
  • 键值：值，Unicode字符，需要字符编码。二进制数据，需要BASE64编码
  • 生存周期：失效时间，单位为秒，默认为关闭浏览器失效
  • 有效路径：可以访问该Cookie的路径，默认和创建路径相同，设置为"/"代表本域名之下所有文件都可以访问，类似与全局变量
  • 域名白名单：可以访问这条Cookie的域名

2. 获取

function getCookie(key) {
        // console.log(document.cookie);
        var res = document.cookie.split(";");
        // console.log(res);
        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];
            }
        }
    }
  • getCookie(key)参数为键名

3. 删除

  • 只要生存时间过期了，这条Cookie就没有了
  • 默认情况下只能删除默认路径中保存的cookie,。
  • 如果想删除指定路径保存的cookie, 那么必须在删除的时候指定路径才可以
function delCookie(key, path) {
        addCookie(key, getCookie(key), -1, path);
    }
  • path参数可不写
  • delCookie("city")即可删除创建的那条Cookie

创建固定生存周期，删除，按需修改即可

怎么查看呢？

F12 --> Application --> Cookies --> （域名）--> result

封装好了，可别忘记引入哦