封装

/**
 * @time 2021年7月21日16:44:00
 * @author "吸鼠霸王"
 * @function "获取所有的cookie"
 * @returns {object}返回cookie是个对象
 */
function getCookieAll() {
    //myname=周杰伦; name=我不姓吴; age=30
    var obj = {};
    var strCookie = document.cookie;//读取cookie并且取出
    var arr = strCookie.split("; ");//返回数组
    arr.forEach(function (item) {
        var arr1 = item.split("=");  //数组元素为字符串,拆分数组中的项目
        var key = arr1[0];
        var val = arr1[1];
        obj[key] = val;//obj.key不能使用,因为key是一个变量
    })
    return obj;//{myname:周杰伦,name:我不姓吴,age:30}
}
/**
 * @function 根据name返回值
 * @param {String} name
 * @returns {string}
 */
function getCookieName(name) {
    var obj = getCookieAll();
    return obj[name];
}
//设置
//name=value;expires=失效时间;path=xxx;domain   =xx;secure
/**
 * @function 设置cookie
 * @param {String} name 
 * @param {String} value 
 * @param {Number} day 
 * @param {String} path 
 * @param {String} domain 
 * @param {String} secure 
 */
function setCookie(name, value, day, path, domain, secure) {
    var strCookie = "";
    if (name) {//形参没有赋值时为undefined,--->false;
        strCookie += name + "=" + value + ";";
    }
    if (typeof (day) == "number") {
        var date = new Date();
        date.setDate(date.getDate() + day);
        strCookie += "expires=" + date + ";"
    }
    if (path) {
        strCookie += "path=" + path + ";"
    }
    if (domain) {
        strCookie += "domain=" + domain + ";"
    }
    if (secure) {
        strCookie += "secure"
    }
    //塞进去
    return document.cookie = strCookie;
   
}
//删除cookie
/**
 * @function 删除cookie
 * @param {String} name
 */
function removeCookie(name) {
    setCookie(name, "", -1)
}

使用

HTML部分

 <button>设置</button>
    <button>修改</button>
    <button>查看</button>
    <button>删除</button>

JS部分

 var oBtns=document.querySelectorAll("button");
        //设置
        oBtns[0].onclick=function(){
             // setCookie("address", "中国", 10); //保存10天
             var arr=["刘德华","周杰伦","吴亦凡","罗志祥"]
              //  把数组转换成字符串格式模样数组,实际性是字符串 " ['刘德华'] "
              var str=JSON.stringify(arr);
              setCookie("cs2104",str,20);
        }
        //修改
        oBtns[1].onclick=function(){
           // setCookie("address", "中国长沙", 10);
           //1.取出cookie,他是一个字符串
           var str = getCookieName("cs2104");
           //2.把字符串转化成数组
           var arr=JSON.parse(str);
           //3.修改数组里的值
           arr[3]="刘志祥";
           //4.把数组转换成 字符串 ,又塞回去  (cookie只支持字符串)
           setCookie("cs2104",JSON.stringify(arr));
           console.log(arr);  
        }

        //查看
        oBtns[2].onclick=function(){
            var res=getCookieName("cs2104");
            console.log(res);
        }
        //删除
        oBtns[3].onclick=function(){
            removeCookie("cs2104")
        }