Cookie保存之謎揭曉：詳解瀏覽器與伺服器之間的交互

隨著網路的發展，我們越來越常使用瀏覽器進行網頁瀏覽、購物、登入等操作。而在這些過程中，我們常常聽到一個詞語——cookie。那麼cookie到底是什麼呢？它的作用又是什麼？今天我們就來揭秘cookie的保存之謎，詳細解析瀏覽器與伺服器之間的交互，並給出具體的程式碼範例。

一、cookie是什麼？

簡單來說，cookie是伺服器發送給瀏覽器並保存在本地的一小段資料。每次瀏覽器向同一台伺服器發起請求時，都會帶上先前儲存的cookie資料。這樣的話，伺服器就能夠讀取瀏覽器中的cookie數據，根據其中的資訊進行相應操作。

二、cookie的作用

1. 會話狀態管理

#透過cookie，伺服器能夠識別出用戶，並在用戶再次訪問該網站時保持使用者的會話狀態。例如，當我們在登入之後，伺服器會向瀏覽器發送包含我們登入資訊的cookie，這樣當我們再次造訪網站時，伺服器就能夠像上一次一樣認出我們，並自動登入。

2. 個人化設定

透過cookie，伺服器能夠取得一些使用者的個人習慣和偏好等信息，從而為使用者提供更為個人化的服務和建議。例如，當我們瀏覽購物網站時，伺服器會根據我們先前的購買記錄以及瀏覽歷史記錄等資訊推薦相關的商品。

3. 追蹤分析

透過cookie，伺服器能夠追蹤使用者的瀏覽習慣，從而進行相關的分析和統計。例如，廣告公司可以透過cookie追蹤使用者造訪不同網站的時間和頻率等訊息，從而了解使用者的興趣和購買慾望，為廣告商提供更好的廣告推廣服務。

三、瀏覽器與伺服器之間的互動

cookie的保存與取得在瀏覽器與伺服器之間進行，整個互動過程可分為以下四個步驟：

1. 瀏覽器向伺服器發送請求，請求中不包含cookie資訊。
2. 伺服器接收到請求後，產生並傳送cookie資料給瀏覽器。
3. 瀏覽器接收到cookie資料後，儲存在本機。
4. 瀏覽器再次向同一台伺服器發送請求，請求中帶上先前儲存的cookie資料。

為了更好地理解這個過程，我們來看一個具體的例子。

（1）伺服器程式碼範例

以下是使用Node.js框架編寫的伺服器程式碼，用於向瀏覽器發送包含cookie訊息的回應。

const http = require('http');

http.createServer((req, res) => {
  //设置cookie
  res.writeHead(200, {
    'Set-Cookie': 'name=cookie_test; max-age=60'
  });

  //发送响应
  res.end('Hello World!
');
}).listen(8080);

console.log('Server running at http://localhost:8080/');

程式碼解析：

• 在伺服器回應頭中使用Set-Cookie字段，將cookie資料傳送給瀏覽器。
• 透過max-age參數設定cookie的有效期，這裡設定為60秒。

（2）瀏覽器程式碼範例

以下是使用JavaScript編寫的瀏覽器程式碼，用於向上述伺服器發送請求，並在接收到回應時輸出cookie訊息。

// 发送请求
fetch('http://localhost:8080')
  .then(response => {
    // 读取cookie
    console.log(response.headers.get('Set-Cookie'));
    return response.text();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));

程式碼解析：

• 使用fetch函數向伺服器發送請求。
• 透過response.headers.get('Set-Cookie')方法讀取回應頭中的cookie資訊。
• 使用response.text()方法取得回應體中的文字資訊。

四、cookie的常見屬性

除了上述範例中使用的max-age屬性外，cookie還有許多其他的屬性。常見的屬性如下：

1. Path

此屬性規定了cookie的路徑。在瀏覽器啟動請求時，只有請求的路徑與cookie的路徑完全相符時，才會帶上該cookie。

res.writeHead(200, {
  'Set-Cookie': 'name=value; Path=/test'
});

2. Domain

該屬性規定了cookie的網域名稱。在瀏覽器發起請求時，只有請求的網域名稱與cookie的網域完全相符時，才會帶上該cookie。

res.writeHead(200, {
  'Set-Cookie': 'name=value; Domain=.example.com'
});

3. Expires

此屬性規定了cookie的有效期限。在設定了該屬性後，cookie會在指定的時間自動過期並被瀏覽器刪除。

res.writeHead(200, {
  'Set-Cookie': 'name=value; Expires=Wed, 18 Nov 2020 08:51:29 GMT'
});

4. Secure

該屬性規定了cookie是否只能透過https協定傳送。設定了該屬性後，只有在發起https請求時，才會帶上該cookie。

res.writeHead(200, {
  'Set-Cookie': 'name=value; Secure'
});

5. HttpOnly

此屬性規定了cookie是否只能透過http協定傳送。設定了此屬性後，瀏覽器無法透過JavaScript來取得該cookie訊息，進而提高cookie的安全性。

res.writeHead(200, {
  'Set-Cookie': 'name=value; HttpOnly'
});

五、總結

透過本文的介紹，我們了解了cookie的定義、作用、保存方式以及常見的屬性等內容。同時，我們也學習了瀏覽器與伺服器之間的cookie互動模式，並透過具體程式碼範例來加深對cookie的理解。身為前端工程師，我們應深入了解並掌握cookie相關知識，以便更有彈性、更有效率地應用在實際開發上。

以上是Cookie保存之謎揭曉：詳解瀏覽器與伺服器之間的交互的詳細內容。更多資訊請關注PHP中文網其他相關文章！