【document.cookie】在Web開發中，`document.cookie` 是一個非常重要的屬性，它允許JavaScript讀取和設置當前頁面的Cookie信息。Cookie主要用于存儲用戶的信息、會話狀態等數據，是前端與后端進行數據交互的一種方式。
一、總結
`document.cookie` 是JavaScript中用于操作Cookie的接口。通過這個屬性，開發者可以獲取當前頁面的所有Cookie，也可以添加或修改特定的Cookie值。然而，由于Cookie的安全性和局限性，在現代Web應用中，越來越多地被 `localStorage` 和 `sessionStorage` 所替代。但了解 `document.cookie` 的使用仍然是前端開發的基礎知識之一。
二、document.cookie 使用說明
| 屬性/方法 | 說明 |
| `document.cookie` | 用于讀取或設置Cookie。格式為 `key=value; path=path; domain=domain; expires=date; secure` |
| `document.cookie = "name=value"` | 設置一個Cookie |
| `document.cookie = "name=value; max-age=0"` | 刪除一個Cookie |
| `document.cookie.split(';')` | 分割所有Cookie為數組 |
| `decodeURIComponent()` | 用于解碼Cookie的值（防止特殊字符出錯） |
三、示例代碼
```javascript
// 設置一個Cookie
document.cookie = "username=JohnDoe; max-age=3600; path=/";
// 獲取所有Cookie
let cookies = document.cookie;
// 獲取特定Cookie
function getCookie(name) {
let cookieArr = document.cookie.split(";");
for (let i = 0; i < cookieArr.length; i++) {
let cookie = cookieArr[i].trim();
if (cookie.indexOf(name + "=") === 0) {
return cookie.substring(name.length + 1);
}
}
return null;
}
console.log(getCookie("username")); // 輸出: JohnDoe
```
四、注意事項
- 安全性問題：Cookie容易受到XSS攻擊，敏感信息不應存儲在Cookie中。
- 大小限制：每個Cookie通常不超過4KB，總大小一般不超過20KB。
- 路徑和域名限制：Cookie只能在指定的路徑和域名下訪問。
- 過期時間：可以通過 `expires` 或 `max-age` 設置Cookie的有效期。
五、與 localStorage 的對比
| 特性 | document.cookie | localStorage |
| 存儲位置 | 瀏覽器本地 | 瀏覽器本地 |
| 生命周期 | 可設置過期時間 | 永久存儲，除非手動清除 |
| 安全性 | 較低，易受XSS攻擊 | 較高 |
| 數據類型 | 字符串 | 字符串 |
| 傳輸方式 | 自動隨HTTP請求發送 | 不自動發送 |
六、總結
`document.cookie` 是前端開發中處理Cookie的重要工具，雖然在現代應用中逐漸被更安全的存儲方式所取代，但在一些場景下仍然具有不可替代的作用。開發者應合理使用，并注意其潛在的安全風險。理解其工作原理有助于構建更健壯的Web應用。