---
# System prepended metadata

title: 第八週 讀書會紀錄- 前端面試常見問題

---

## 議程
1.  開場：分享上周進度
2.  重點導讀 + 補充資料
5.  當周主題，自由分享相關面試題回答！(模擬面試)
6.  討論第六章原型
7.  其他 (本周課程與其他有趣的)


## 參加人員
參加人員：晟暘、Nex、Margo
主持：Margo
紀錄：Nex

## 筆記分享
[第八章筆記](https://charmed-neptune-e6a.notion.site/051607b5cff74e968ec7a49de11f3289?pvs=4)

[第六章筆記] (https://charmed-neptune-e6a.notion.site/7-22-54d425775eb84d8dab1b84ba7234ee74?pvs=4)
[Nex 第六週筆記](https://hackmd.io/WYW_5EsdRfeAZtYBFaCYzg)
## 補充
https://app.daily.dev/
[app.daily.dev google 擴充套件](https://chrome.google.com/webstore/detail/dailydev-the-homepage-dev/jlmpjdjjbgclbocgajdjefcidcncaied)

## 瀏覽器資料儲存- ****Cookie、LocalStorage、SessionStorage 差異****

[https://miahsuwork.medium.com/第八週-網頁資料儲存-cookie-local-storage-session-storage-a3f40013da37](https://miahsuwork.medium.com/%E7%AC%AC%E5%85%AB%E9%80%B1-%E7%B6%B2%E9%A0%81%E8%B3%87%E6%96%99%E5%84%B2%E5%AD%98-cookie-local-storage-session-storage-a3f40013da37)

### Cookie

client 端送出 request 時會自動把 cookie 帶到 server 端，而 server 端也可以把資料寫到 response 的 header 中 `set-cookie` ，傳到 client 端

1. Cookie 的限制
    1. 4k 以下
    2. 一個 doman 只能儲存 20 個 cookie
2. Cookie 的功能：辨識身分
    1. 廣告追蹤
    2. 身分驗證
    3. 購物車
3. ****Cookie 實務上最常見的作法****
    1. 存放使用者 id

### ****web storage - Local Storage****

► ****Local Storage：****能 **跨分頁的儲存資料**，關閉頁面資料也不會消失（例如：某些網站的表單當我們填寫到一半關掉重新開啟仍然會記住之前輸入的資訊）

► Session Storage：不能跨分頁的儲存資料，關閉頁面資料會消失

🌵 **儲存方式類似 Object，`key: value` 格式**

<aside>
💡 要特別注意的是 Value 只能是「字串」因此如果想要儲存 JSON 的資料，我們可用 `JSON.stringify()` 存入 用 `JSON.parse()` 取回

</aside>

🌵 **使用方式**

- 設定資料：windows.localStorage.setItem(key, value)
- 取得資料：let storage = windows.localStorage.getItem(key)
- 刪除資料：windows.localStorage.removeItem(key, value)
- 刪除全部資料：windows.localStorage.clear()

## 面試題

