封裝

/**
 * @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("; ");//返回數(shù)組
    arr.forEach(function (item) {
        var arr1 = item.split("=");  //數(shù)組元素為字符串,拆分數(shù)組中的項目
        var key = arr1[0];
        var val = arr1[1];
        obj[key] = val;//obj.key不能使用,因為key是一個變量
    })
    return obj;//{myname:周杰倫,name:我不姓吳,age:30}
}
/**
 * @function 根據(jù)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=["劉德華","周杰倫","吳亦凡","羅志祥"]
              //  把數(shù)組轉換成字符串格式模樣數(shù)組,實際性是字符串 " ['劉德華'] "
              var str=JSON.stringify(arr);
              setCookie("cs2104",str,20);
        }
        //修改
        oBtns[1].onclick=function(){
           // setCookie("address", "中國長沙", 10);
           //1.取出cookie,他是一個字符串
           var str = getCookieName("cs2104");
           //2.把字符串轉化成數(shù)組
           var arr=JSON.parse(str);
           //3.修改數(shù)組里的值
           arr[3]="劉志祥";
           //4.把數(shù)組轉換成 字符串 ,又塞回去  (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")
        }