# Cookie/LocalStorage/SessionStorage

comment: 你給我附上參考程式碼，你當你在看文章做筆記是不是

## Cookie
為儲存小資料為主(4KB)，儲存在從伺服器傳來的資料中，會有一小部分為存放cookie，每次發送請求時，都會帶著cookie，在JS可以用`document.cookie`來設置cookie，可以設定消失的時間，但用`document.cookie`只能設定或更新一個 Cookie。

**程式碼:**

// 把所有的cookie輸出出來
console.log(document.cookie) 
// 把一個名為user，值為John放入cookie
document.cookie = "user=John"

**使用場景** : 保存使用者登陸狀態、紀錄或分析使用者行為。
## LocalStorage
可以將資料儲存在客戶端，用`key-value`的方式存取，有更大的存取空間(5MB)，除非手動刪除，不然會一直存在。

**程式碼:** `window.`可加可不加

//設定key和value
window.localStorage.setItem('key', value) 
//從key取出值來
const Value = window.localStorage.getItem('key') 

**使用場景** : 需長時間保存的資料、離線應用
## SessionStroage
可以將資料儲存在客戶端，用`key-value`的方式存取，有更大的存取空間(5MB)，只在當前的瀏覽器有效，關閉就會刪除。

**程式碼:** `window.`可加可不加

//設定key和value
window. sessionStorage.setItem('key', value)
//從key取出值來
const Value = window. sessionStorage.getItem('key') 

**使用場景** : 表單數據保留
## Check
可以按檢查->Application->選你所使用的東西，就可以看到儲存的情況。

## Reference
- https://www.explainthis.io/zh-hant/swe/cookie-sessionstorage-localstorage-difference
- https://medium.com/@bebebobohaha/cookie-localstorage-sessionstorage-%E5%B7%AE%E7%95%B0-9e1d5df3dd7f
- https://seanacnet.com/react/cookie-localstorage-sessionstorage-usage/

---
- Contributor: 王鈞宇