前言localStorage在許多網站上很常會應用到，這篇會來整理localStorage的用法，另外會比較Cookie和Session Storage。
localStorage 是什麼呢？localStorage 是什麼呢？ 一個可以儲存資料的儲藏室，當重新整理瀏覽器資料不會消失。購物網站上常常會有你最近看過的商品，再次出現在網站上，最近收尋過的關鍵字等等，便是使用localStorage的方式。
localStorage會在同一個網址文件(Document)底下存資料。儲存資料並無到期的限制。
從開發者工具的Application中可以查看Local Storage儲存的資料。
儲存到 Local Storage12345// 可以設定儲存的資料名稱Key和值ValuelocalStorage.setItem('Key', Value);// 儲存值為字串形式，若值為物件則可用JSON.stringify(data)轉為字串localStorage.setItem('Key', JSON.stringify(data));
取得 Local Storage 資料123localStorage.getItem('Key');// 取得物件資料時 則可用JSON.parse(localStorage.getItem('Key'))轉為物件
刪除 Local Storage 資料1localStorage.removeItem('Key');
清空 Local Storage 資料1localStorage.clear();
Local Storage、Session Storage和Cookie的差異這三者都會在同一個網址文件(Document)底下存資料。
Local Storage
是否隨著 http req/res：No被限制在該網站的規範內，其他網站無法存取。
生命期限: 無限制儲存資料並無到期的限制，目前瀏覽器頁面被關閉時不會被清除。
儲存位置：Browser Only
可取範圍(accessible from)：Any window of browser
資料儲存量：10mb 左右
Session Storage
http req/res：No被限制在該網站的規範內，其他網站無法存取。
生命期限: On Tab closeSessionStorage 的儲存資料於目前瀏覽頁狀態結束的同時將一併被清除 — 也就是目前瀏覽器頁面被關閉時或是還原頁面時。
儲存位置：Browser Only
可取範圍(accessible from)：Same Tab
資料儲存量：5mb 左右
與LocalStorage語法一樣
1234567891011// 將資料存到sessionStoragesessionStorage.setItem('key', 'value');// 從sessionStorage取得之前存的資料var data = sessionStorage.getItem('key');// 從sessionStorage移除之前存的資料sessionStorage.removeItem('key');// 從sessionStorage移除之前存的所有資料sessionStorage.clear();
Cookiecookie 是在瀏覽器端一個儲存少量資料的空間。當瀏覽器與server 互動時 cookie 就會隨著 http request / response 來回傳送。通常由伺服器透過 Set-Cookie header 傳遞給瀏覽器。瀏覽器收到後會將 cookie 儲存起來，並在之後的請求回傳 cookie 至同樣的伺服器。可以應用於網站後台驗證、追蹤使用者行為及廣告上。
http req/res：Yes
生命期限: 用戶/server 手動設定
儲存位置：Browser and Server
可取範圍(accessible from)：Any window of browser
資料儲存量：4kb 左右
1234document.cookie = "yummy_cookie=choco"; document.cookie = "tasty_cookie=strawberry"; console.log(document.cookie); // logs "yummy_cookie=choco; tasty_cookie=strawberry"
更詳盡的使用方法，這篇主要是整理LocalStorage，cookie的部分就先不整理。更多關於cookie可參考什麼是 Cookie？如何用 JS 讀取/修改 document.cookie?
LocalStorage 實例之前在Udemy上課時，製作的一個電影院座位選位的小程式，使用localStorage 存儲已選的座位與電影。
DEMO
參考資料
MDN - Window.localStorage
MDN - Using HTTP cookies
重要的基礎：Cookie v.s Session Storage v.s Local Storage And Cookie-based v.s Token-based Authentication
什麼是 Cookie？如何用 JS 讀取/修改 document.cookie?