[JS]Cookies詳解 範例 example 手把手教你

Posted on by Mingray



下面的語法用來建立一個新的 cookie：

document.cookie = "user_id=54088"; 
document.cookie = "lastBuy=nike_air_max"; 
console.log(document.cookie); 
// "user_id=54088; lastBuy=nike_air_max"

參數設定

  • path = path
    設定能讀取到此 cookie 的路徑，例如 path=/; 表示讓整個網站都讀取得到，預設為目前網頁所在的路徑。
  • domain = address
    設定能讀取到此 cookie 的網域，例如 ;domain=freesite.host 表示讓子網域 (subdomain)  mrcodingroom.freesite.host / some.freesite.host 都能讀取得到，預設為目前網頁的網域。
  • max-age = seconds
    設定 cookie 的存活期限，單位為秒，例如 86400 就是一天後失效。
  • expires = date-in-GMTString-format
    設定 cookie 的存活期限，值是一個 Date.toUTCString() 格式的時間字串。
  • secure = boolean/null
     設定 cookie 只能於 https 連線中被傳送。
//Example
document.cookie = "id=test0; Secure; Path=/; Domain=example.com"; 
document.cookie = "id=test1; Expires=Wed, 21 Oct 2015 07:28:00 GMT"
document.cookie = "id=test2; Max-Age=2592000"
function parseCookie() {
    let cookieObj = {};
    let cookieAry = document.cookie.split(';');
    let cookie;
    
    for (let i=0, l=cookieAry.length; i<l; ++i) {
        if(cookieAry[i].includes('=')){
        cookie = cookieAry[i].split('=');
        cookieObj[cookie[0]] = cookie[1];
        }
    }
    return cookieObj;
}

function getCookieByName(name) {
    let value = parseCookie()[name];
    if (value) 
        value = decodeURIComponent(value);
    return value;
}

我們就可以很方便的讀取 cookie，像是取得 username 的 cookie 只需要用 getCookieByName('username')。

注意

當我們在設定的value的時候，可以使用 encodeURIComponent() 這個方法來儲存內容，可以讓特殊符號 $#@*^!,這種轉換成URI形式，讓程式解析的時候比較不會出錯 。

//Example
let content  = encodeURIComponent('http://example');
document.cookie = `id=${content}`;
// 實際內容: "id=http%3A%2F%2Fexample"

刪除Cookies

單純把你想要那個cookies值，設成過期就好

//Example
document.cookie = `id=test1; max-age=888888888888`; //建立一個新的
document.cookie = `id=test1; max-age=0`;  //讓他立刻到期，用expires也是一樣作法

範例區:

新增Cookies

<div>
 <input placeholder='請輸入key值' id='cookiesKey'/>
 <input placeholder='請輸入value值' id='cookiesValue'/>
</div>
<div>
 <button onclick="addCookies()">submit</button>
</div>
<script>
 function addCookies() {
   let key = document.getElementById('cookiesKey').value;
   let value = document.getElementById('cookiesValue').value;
   document.cookie = `${key}=${value}; max-age=999999`; 
   console.log(`新增key: ${key}, value: ${value}`)
 }
</script>

查詢Cookies

<div>
 <input placeholder='請輸入key值' id='cookiesKey'/>
</div>
<div>
 <button onclick="getCookieByName()">submit</button>
</div>
<script>
function getCookieByName() {
    let name = document.getElementById('cookiesKey').value;
    let value = parseCookie()[name];
    if (value) 
        value = decodeURIComponent(value);
    console.log("查詢值為: "+value);
}
function parseCookie() {
    let cookieObj = {};
    let cookieAry = document.cookie.split(';');
    let cookie;
    
    for (let i=0, l=cookieAry.length; i<l; ++i) {
        if(cookieAry[i].includes('=')){
        cookie = cookieAry[i].split('=');
        cookieObj[cookie[0]] = cookie[1];
        }
    }
    return cookieObj;
}
</script>

刪除Cookies

<div>
 <input placeholder='請輸入key值' id='cookiesKey'/>
</div>
<div>
 <button onclick="removeCookies()">submit</button>
</div>
<script>
 function removeCookies() {
   let key = document.getElementById('cookiesKey').value;
   document.cookie = `${key}=''; max-age=0`; 
   console.log(`已刪除key: ${key}`)
 }
</script>

顯示Cookies

<div>
 <button onclick="showCookies()">show all cookies</button>
</div>
<script>
function showCookies() {
 console.log(parseCookie());
}
function parseCookie() {
    let cookieObj = {};
    let cookieAry = document.cookie.split(';');
    let cookie;
    
    for (let i=0, l=cookieAry.length; i<l; ++i) {
        if(cookieAry[i].includes('=')){
        cookie = cookieAry[i].split('=');
        cookieObj[cookie[0]] = cookie[1];
        }
    }
    return cookieObj;
}
</script>

發表迴響

%d 位部落客按了讚：