未分類

透過購物車來了解Cookie的運作方式

Javascript

在電子商務網站中一定會有購物車這個功能，讓你能夠將喜歡的東西放在裡面，最後再一次結帳，這篇文章將簡單講解為什麼需要有 Cookie 以及前端技術上使用 Cookie 的方法。

在講解 Cookie 一來之前，先來聊聊 HTTP 這個東西，HTTP 是一種網路通訊協定，主要用來傳輸網頁相關的內容(HTML、圖片、影片…)之類的檔案，在 HTTP 的世界中是沒有狀態可言的，也就是所謂的stateless，每次連線請求都是獨立發生，不會因為前一秒才傳照片給你就把你當朋友，每次連線都是新的開始。

也因此發展出的一些網頁儲存狀態的方法，最常見的就是Cookie和session兩種方法，本文要講的 Cookie 是前後端都可以做修改的，並且是會附屬在 HTTP 的連線請求上，後者是僅能在伺服器端上做的狀態紀錄。

在 Chrome 上有兩種方法可以看到自己在網站上的Cookie

  1. 從網址列的左邊小 i 圖示

  1. F12開發人員工具>Network

那個，Cookie 的欄位長成甚麼樣子呢?

Cookie:key1=value1;key2=value2;

以分號分開的格式，但這樣的資料每次都要處理很麻煩，所以就藉由一個套件叫做js-cookie，這個套件主要是幫我們處理了一下 Cookie 的資料，讓我們能夠很簡單的編輯 Cookie 的內容。

首先，在 HTML 中以 CDN 方式引入js-cookie

<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>

當然也可以到 Github 的 repo 上找到其他使用的方法，看你喜歡哪種

完成之後就可以來使用 Cookie 存放資料了

Cookies.set('foo', 'bar')

由於Cookie 是存放在你的瀏覽器上面，沒設定時效性的話，在瀏覽器關閉時 Cookie 就會同時失效，所以通常我們都會替他設一個時效性，過了時效瀏覽器就會自己幫他清除。

Cookies.set('name', 'value', { expires: 7 })
// 7天後這個Cookie就過期

Cookies.get('foo')
// 'bar'
Cookies.remove('foo')
// 'bar'

進階一點的用法

  • 路徑(path)

所謂路徑就是在你域名或 IP 之後的那一串字

例如:

這個的路徑就是/

這個的路徑就是/car

知道路徑的概念之後就可以做更進階的用法了，如果你只想要在購物車的頁面上才能讀取到物品的 Cookie ，那麼可以加入一個 path 的屬性(假設路徑是”/car”)，當然這是非必要，只是有些內容比較敏感，可能就需要限制能夠存取的路徑。

Cookies.set('name3', 'value', { path: '/car' })

如此一來只有在 https://yourdomain.com/car 這個網址下才能取得這個 Cookie 了

  • 域名(domain)

域名簡單來說就是網址上通訊協定之後，第一個 slash 之前的區塊叫做域名，當然有些時候也有可能是 IP ，以下舉例

另外還要提到的一個東西叫做子網域，子網域是附屬在網域底下的名稱，假設我擁有一個域名叫做 yourdomain.com，那麼我就有權限能夠在這個域名底下掛上子網域，如下

  • sub1.yourdomain.com
  • sub2.yourdomain.com

這兩個例子也是隸屬在 yourdomain.com 底下的網域

網域的內容其實可以開獨立一篇文章來解釋，但這裡是 Cookie 的場，就不做太多講解了。

Cookie 不只可以針對路徑去設定 Cookie ，也可以針對特定域名上去做設定，使用方式如下

Cookies.set('key', 'value', { domain: 'sub.yourdomain.com' })

這個 Cookie 設定之後就只能在 sub.yourdomain.com 底下存取，在 yourdomain.com 是無法成功取得的。

但如果執行的是

Cookies.set('key', 'value', { domain: 'yourdomain.com' })

則在主網域(yourdomain.com)與子網域(sub.yourdomain.com)都是能夠存取到這個 Cookie 的。

應用場景示範 : 餅乾電商

首先，我們先做個簡單的購物頁面如下圖，並透過 localhost 的方式將網頁打開

接下來寫個 JS function ，等一下要讓加入購物車按鈕按下時能夠將品項放到 Cookie 中

function addToCar(item){
        //item為品項名稱，型態為字串
    if(Cookies.get("carItem") == undefined){
                //若目前沒有 carItem 這個 key 的 Cookie ，直接新增一個，並只對購物車頁面設定 Cookie
        Cookies.set("carItem", item, { path: '/car.html' })
    }
    else{
                //有的話就用逗號將品項做分隔再加入至 carItem 中
        currentItem = Cookies.get("carItem");
        currentItem = currentItem+","+item; 
        Cookies.set("carItem", currentItem, { path: '/car.html' });
    }
    alert("已加入"+item+"至購物車");
}

寫好寫入 Cookie 的函式之後，就將該功能帶入至按紐當中

<a href="#" class="btn btn-primary" onclick="addToCar('餅乾一號')">加入購物車</a>

這樣就完成簡易購物車的功能了，夠簡單吧! 我們來按個按鈕試試看

看起來活得好好的，接下來我們創立一個 car.html 的頁面

<!DOCTYPE html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
    <title>我的購物車</title>
</head>
<body>
    <ul></ul>
    <script>
        //若 Cookies 中沒有 carItem 這個 key ，提醒使用者快去買東西!!
        if(Cookies.get("carItem") == undefined){
            let element = document.createElement("p");
            element.innerText = "購物車內沒有物品喔!趕快去選購"
            document.querySelector("ul").appendChild(element);
        }
        else{
            //藉由split方法將逗號切開來，即可把品項一個一個列出來
            let items = Cookies.get("carItem");
            items = items.split(",");
            for(let item of items){
                let element = document.createElement("li");
                element.innerText = item;
                document.querySelector("ul").appendChild(element);
            }
        }
    </script>
</body>
</html>

進入 car.html 的頁面看看，應該就可以看到剛剛加入的品項了喔!

最後，可以順便看看 Cookie 中的內容，會發現他是被 URL Encoded 起來的

結語

透過這篇稍微介紹了一下 Cookie 的概念與使用方法，這其中其實牽涉到許多電腦網路的概念，沒學過這一塊的人可能會不太了解其中的一些原理，希望能藉由這篇簡單的教學讓大家有稍微了解一下 Cookie 與其他相關的知識。另外，關於 Cookie 的資安議題其實也不少，所以使用 Cookie 時也需要多多注意，尤其是 GDPR 法案或是遭到篡改的可能性都有，底下會附上相關參考資訊。

延伸閱讀

內容圖示版權聲明

Icon made by Smashicons from www.flaticon.com

分享到