學習目標：了解 client 端的資料儲存方式：cookie、LocalStorage、SessionStorage
本文主要源自以下資料的學習整理：
client 端的資料儲存方式
我們在逛某些購物網站時會把想購買的物品放進購物車中，當我們把瀏覽器關閉重新再進入時，會發現購物車裡的東西還在！但如果換台電腦或其他瀏覽器重新再進入時，卻發現購物車裡沒有東西，這是為什麼呢？
這是因為購物車的資料是儲存在瀏覽器中，我們可以透過 javaScript 把一些資料儲存在瀏覽器中，而且可以儲存的地方不只一個，以下詳細說明：
cookie
是一個小型的文字檔，我們可以用在 client 端用 JavaScript 把資料寫到 cookie 中，特性是當送出 request 時會自動把 cookie 帶到 server 端，而 server 端也可以把資料寫到 response 的 header 中 set-cookie ，傳到 client 端
Cookie 的限制
- 限制 4k 以下
- 不同的 doman 會有不同的 cookie，一個 doman 只能儲存 20 個 cookie
Cookie 的功用：辨識身份
- 廣告追蹤
- 身份驗證（通行證）
- 購物車
打開開發者工具 Application cookie 就可以看到這個 domain 儲存的 cookie
Cookie 實務上最常見的作法
由於限制容量小並且大量的資料透過 Cookie 傳輸，會影響效能，因此常見的做法是在 cookie 只存放「能代表使用者是誰的 ID」，類似通行證一樣，而 Server 端則是儲存此 ID 的資料，當從 client 端發出 request 時，server 端就會回傳這個 ID 相對應的資料，就能辨認身份。
web storage
HTML5 提供了一個能在 Client 端儲存資料的技術，分為 Local Storage 跟 Session Storage，兩者的差異在於
- Local Storage：能跨分頁的儲存資料，關閉頁面資料也不會消失（例如：某些網站的表單當我們填寫到一半關掉重新開啟仍然會記住之前輸入的資訊）
- Session Storage：不能跨分頁的儲存資料，關閉頁面資料會消失
在容量的部分大多有 5 MB ，因此相對於 cookie 來說是更好儲存資料的方式！
打開開發者工具 Application cookie 就可以看到這個 domain 儲存的 Local Storage 跟 Session Storage
可以看到是用類似 Object 的格式，key 對應 Value 的方式儲存資料
要特別注意的是 Value 只能是「字串」因此如果想要儲存 JSON 的資料，我們可用 JSON.stringify() 存入 用 JSON.parse() 取回
操作 API
- 設定資料：windows.localStorage.setItem(key, value)
- 取得資料：let storage = windows.localStorage.getItem(key)
- 刪除資料：windows.localStorage.removeItem(key, value)
- 刪除全部資料：windows.localStorage.clear()
實作- 願望清單
功能說明：
- 可以輸入的資料，並顯示於頁面上
- 資料儲存於 localStorage
- 可以刪除單筆資料
- 可以刪除全部資料
在一開始常常沒有把資料類型搞清楚，導致一直跳錯誤….
後來隔一天好好重新寫一遍，就很快寫出來了（散散步果然有用）
這邊要特別注意的是，在設定變數時，因為在第一次提取 localStorage 不會有資料，因此設定變數時要再加上 || [] 才能在第一次及清除全部資料重新整理後不會跑出錯誤。
重點整理
- client 儲存資料的方式有三種： cookie 、Local Storage 及 Session Storage。
- cookie：是一個小型文字檔，容量只有 4k 因此實作上僅會放入 id 便於回傳 server 端提取相對應的資料（類似通行證的概念），像是廣告追蹤、購物車、登入等。
- Local Storage & Session Storage：是 html5 提供的方法，兩個的差別在於資料儲存的時間性，相對於 cookie 是比較推薦的方法，打開開發者工具 Application 就可以看到資料，要特別注意的是只能儲存「字串」，所以通常會將陣列使用
JSON.stringfy()存取，再透過JSON.parse()轉陣列使用，以下是相關 API：
設定資料：windows.localStorage.setItem(key, value)取得資料：let stroage = windows.localStorage.getItem(key)刪除資料：windows.localStorage.removeItem(key, value)刪除全部資料：windows.localStorage.clear()
以上有錯誤的地方歡迎指正，感謝。
