以往我們要在使用者端存取資料會使用 cookie，但 cookie 可以存的資料非常有限，所以後來 HTML5 發展出了 Web Storage，而 Web Storage 又分成了 local storage 和 session storage，這邊先比較一下 cookie 和 Web Storage的差異。
| Web Storage | Cookies | |
|---|---|---|
| 儲存空機大小 | 5M(瀏覽器可能各異) | 4k(瀏覽器可能各異) |
| 伺服器端存取 | 可以 | 不行 |
| 存取限制 | 相同網域 | 相同網域及路徑 |
| 處理方式 | 使用 js 物件 | 字串 |
| 事件支援 | 有 | 無 |
| 刪除方式 | 使用API | 關閉瀏覽器或設定時間過期 |
而 localStorage 和 sessionStorage 的差別則在於生命週期和有效範圍，sessionStorage 只要關閉視窗或分頁就會消失，localStorage 需要手動靠 API 刪除，而 localStorage 可以跨瀏覽器分頁（tab）存取，sessionStorage不行。
常見會使用的方法有以下這些：
- 屬性
- length
- 方法
- key(n) 、getItem(key) 、setItem(key,value) 、removeItem(key) 、clear()
用法如下，這邊就用 local storage 說明：
//設定值
localStorage.setItem("keyname", "value");
//取值
localStorage.getItem("keyname")
//刪除值
localStorage.removeItem("keyname"); //刪除某筆資料
localStorage.clear(); //刪除所有資料
由於 local storage 存取的時候也只能存成字串，所以如果要存比較複雜的資料的話，我們就會需要用 json 轉 string 存資料，反向則把字串轉回 json 讀取出來。
//取值 JSON.stringify(data) //給值 JSON.parse(data)
最後這邊來個簡單的範例，我們從輸入欄位新增資料，也可以讓使用者刪除每一筆資料，每次操作也同時更新 local storage，這樣重刷頁面資料也都能維持上次更新的狀態。
