目前有两种方式通过js来设置cookie,一种是原生的方式,另一种是引入js-cookie.js的方式下载。
第一种方式:
使用原生js来设置cookie:
// 设置名为name、值为value的Cookiedocument.cookie = "name=value";
这种方式设置的cookie需要比较复杂的方式去获取cookie
读取(获取) Cookie 同样使用document.cookie即可,该属性会返回一个字符串,字符串中包含除 max-age、expires、path 和 domain 等属性之外的所有 Cookie 信息,例如url=http://c.biancheng.net/; course=JavaScript。为了获取单个 Cookie 的值,我们可以通过 split() 函数将包含 Cookie 信息的字符串拆分为数组,然后再获取某个 Cookie 的值,示例代码如下:
function getCookie(name) { // 拆分 cookie 字符串 var cookieArr = document.cookie.split(";"); // 循环遍历数组元素 for(var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* 删除 cookie 名称开头的空白并将其与给定字符串进行比较 */ if(name == cookiePair[0].trim()) { // 解码cookie值并返回 return decodeURIComponent(cookiePair[1]); } } // 如果未找到,则返回null return null; }
针对以上问题,这边我提供一个直接封装好的3个方法供大家使用,非常方便,直接复制即可:
//设置cookie function setCookie(name,value,expires,path,domain,secure){ let cookieString=name + "="+encodeURIComponent(value) if(expires){ let expirationDate= new Date(); expirationDate.setTime(expirationDate.getTime()+expires*24*60*60*1000) cookieString+="; expires="+expirationDate.toUTCString() } if(path){ cookieString+="; path="+path } if(domain){ cookieString+="; domain="+domain } if(secure){ cookieString+=";secure" } document.cookie = cookieString } //获取cookie function getCookie(name){ let cookieName=name+"="; let cookies = document.cookie.split(";") for(let i=0;i<cookies.length;i++){ let cookie=cookies[i].trim(); if(cookie.indexOf(cookieName)===0){ return decodeURIComponent(cookie.substring(cookieName.length)) } } return null; } //删除cookie function deleteCookie(name,path,domain){ if(getCookie(name)){ document.cookie=name+"=; expires=Thu, 01 Jan 1970 00:00:00 UTC" } if(path){ document.cookie=name+"=; path="+path } if(domain){ document.cookie=name+"=; domain"+domain } }
第二种方法:
第二种方法是通过引入js-cookie.js,也可以直接使用cdn:<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>也是很方便,或者自己下载下来使用,使用方法也很简单
// 写入cookie Cookies.set('name', 'value') // 读取 Cookies.get('name') // => 'value' Cookies.get('nothing') // => undefined // 读取所有可见的cookie Cookies.get() // 删除某项cookie值 Cookies.remove('name')以上就是js设置cookie,js删除cookie,js获取cookie的全部内容啦,希望能帮助到大家。