封裝一個對cookie操作的模組
阿新 • • 發佈：2021-12-09
廢話不說直接上程式碼
cookie.js
點選檢視程式碼
const set = (name,value,{maxAge,domain,path,secure} = {}) => { let cookieStr = `${encodeURIComponent(name)} = ${encodeURIComponent(value)}`; if(typeof maxAge == 'number'){ cookieStr += `; max-age = ${maxAge}`; } if(domain){ cookieStr += `; domain = ${domain}`; } if(path){ cookieStr += `; path = ${path}`; } if(typeof secure == 'boolean'){ if(secure == true) cookieStr += '; secure'; } console.log(cookieStr); document.cookie = cookieStr; return true; } const get = name => { name = encodeURIComponent(name); const cookieArray = document.cookie.split('; '); for (const item of cookieArray) { const [cookieName,cookieValue] = item.split('='); if(cookieName == name){ return decodeURIComponent(cookieValue); } } return false; } const remove = (name,{domain,path} = {}) => { if(name == undefined||domain == undefined || path == undefined){ // console.log(name); // console.log(domain); // console.log(path); return false; } name = encodeURIComponent(name); return set(name,'',{ domain, path, maxAge:-1, }); } export {set,get,remove}
html展示
點選檢視程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cookie的封裝</title> </head> <body> <script type="module"> import {set,get,remove} from './cookie.js' set('user','lsh'); set('使用者','李世海'); set('年齡','永遠的18歲！',{ maxAge:999999999, }); set('secure','value',{ secure:true, }) // 展示出來 const userH2 = document.createElement('h2'); const userChineseH2 = document.createElement('h2'); const ageChineseH2 = document.createElement('h2'); const secureH2 = document.createElement('h2'); // 掛載節點 const boday = document.getElementsByTagName('body')[0]; remove('user',{ domain:'127.0.0.1', path:'/', }) userH2.innerText = get('user'); userChineseH2.innerText = get('使用者'); ageChineseH2.innerText = get('年齡'); secureH2.innerText = get('sevure'); boday.appendChild(userH2); boday.appendChild(userChineseH2); boday.appendChild(ageChineseH2); boday.appendChild(secureH2); </script> </body> </html>
總結
原生方式
新增
document.cookie = 'name=lsh; max-age=9999; domain=.taobao.com; path=/posts; secure'
document.cookie = '名=值; 屬性名=屬性值; 屬性名=屬性值; 屬性名=屬性值; secure'
secure 只要寫上屬性名就生效
doamin 值中的.taobao.com和taobao.com作用不同，.taobao.com代表以taobao.com為根域名的二、三級域名都可以訪問，taobao.com僅僅代表自身
path 值中的/pages和/pages/作用相同，但不視為同一（名/值）對，可同時存在
max-age = -1或0，可removecookie中對應的那一項
cookie中name，domain，path三者相同視為替換
下面三張圖中都存在path為/pages或/pages/的值