Local Storage

Local Storage是html5提供的API，實質上是一個雜湊表。
Session是伺服器上的雜湊表，Local Storage是瀏覽器上的雜湊表。

存值：.setItem()

localStorage.setItem('a', '1')
localStorage.setItem('b', '2')
localStorage.setItem('jsonString', JSON.stringify({name: 'obj'})) //localStorage只能存字串

取值：.getItem()

localStorage.getItem('a') //"1"
localStorage.getItem('b') //"2"
localStorage.getItem('jsonString') //"{"name": "obj"}"

清空Local Storage：localStorage.clear()

這些API都是在操作頁面上的一個雜湊。

對Windows系統來說，Local Storage存在c盤的一個檔案裡，持久化儲存。
如果沒有Local Storage，每次重新整理頁面，所有變數全部銷燬。

Local Storage最典型應用：記錄下有沒有提醒過使用者

let already = localStorage.getItem('已經提示了')
if(!already){
    alert('你好，我們網站改版了，有了這些新功能：……')
    localStorage.setItem('已經提示了', true)
}else {
    //什麼也不做
}

---

Local Storage

1. Local Storage跟HTTP無關
2. HTTP不會帶上Local Storage的值
3. 只有相同域名的頁面才能互相讀取Local Storage（沒有同源那麼嚴格）
4. 每個域名Local Storage最大儲存量為5MB左右（每個瀏覽器不一樣）
5. 常用場景：鉅鹿有沒有提示過使用者（不敏感資訊，不能記錄密碼）
6. Local Storage永久有效，除非使用者清理快取

Session Storage（會話儲存）與Local Storage API一樣
1234點同上

5. Session Storage在使用者關閉頁面（繪畫結束）後就失效。

Session Storage（會話儲存）與伺服器上的Session無關。

---

Cookie是HTTP協議的一個內容，
Local Storage是html5提供的API，
兩者沒什麼關係，為什麼經常有人把它們放在一起比較？
這是有歷史原因的。
Local Storage是新API，之前的前端要做到跨頁面持久儲存只能用Cookie (Cookie也是存在c盤的一個檔案裡)。
但是用Cookie存資料有一個問題：所有寫在Cookie上的資料每次請求都會帶到伺服器，導致請求變慢。
所以現在前端永遠不要讀/寫Cookie，正常來說由後端寫/讀Cookie。