Cookie 介紹(二) Client 端設計

發表於 更新於
介紹在前端操作cookie的方法

在瀏覽器讀取與寫入cookie

讀取所有cookie

1
document.cookie    // 讀取所有cookie

document.cookie會讀取瀏覽器裡所有cookie並組成同個字串如下:

1
"test1=Hello; SameSite=None;  //讀取結果

讀取單一cookie

如果要取出特定cookie的值，我們可以套用function，只要帶入cookie的name，就會返回cookie的值。以下提供一個範例:

1
2
3
4
5
function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

寫入cookie

1
document.cookie = 'myName=bob'   // 寫入cookie

設定cookie 失效時間