[HTML] HTML5 Web Storage

HTML5 針對瀏覽器的本地資料儲存功能定義了多個新方法，
其中 Web Storage (localStorage & sessionStorage) 算是最簡單方便使用的，
Web Storage 跟原本地資料儲存 "cookie" 是個很類似的東西，都是 key-value的架構。

storage 與 cookie 不同的地方

1. 傳輸，cookie 在每個 HTTP request 都會被送到 server 端, storage 僅在 js 中使用
2. 容量，cookie 容量 4KB, web storage 至少 5MB

sessionStorage 和 localStorage 差別

1. 壽命長短
   sessionStorage: 關閉 TAB or Browser 即清除
   localStorage: 需清除 browser cache or 手動指令清除
2. 有效範圍
   sessionStorage: 無法跨分頁, 當然肯定無法跨瀏覽器
   localStorage: 可以跨分頁

Browser Support

各大瀏覽器包含 IE8 以上 (IE8都能用了，就放心服用吧

儲存容量

根據各家瀏覽器實現不同，預設為至少5MB，IE8為10MB

使用方法

存取

localStorage.setItem(“{key}”, “{value}”);

localStorage.getItem(“{key}”);

localStorage.{key} = “{value}”;

var retrieve = localStorage.{key};

(Storage 是 object type, 但是HTML標準只能直接擴充屬性型態為 string)

刪除

localStorage.removeItem(“{key}”);

清空

localStorage.clear();

其他

擴充使用方式

因為 localStorage 是 key-value 的架構，直接使用上會有些不方便，因此可以透過一些方法，更方便管理與使用

1. 搭配 JSON 做操作 (JSON.stringify(), JSON.parse())
2. 擴充 localStorage function 屬性，做出 namespace

資料來源：

其實關於 localStorage 的用法實在蠻簡單，並且資料也算好找

w3schools -> HTML5 Local Storage

http://www.w3schools.com/html/html5_webstorage.asp

Huan-Lin 學習筆記 -> HTML5 Web Storage

http://huan-lin.blogspot.com/2012/06/html5-web-storage.html

吳草兒 -> [UglyCode] 兼顧namespace機制的localStorage存取方式

http://blog.xuite.net/grassboy/Tech/60699360-%5BUglyCode%5D+%E5%85%BC%E9%A1%A7namespace%E6%A9%9F%E5%88%B6%E7%9A%84localStorage%E5%AD%98%E5%8F%96%E6%96%B9%E5%BC%8F

Alien的筆記 -> 本地存储替代cookie：qext.LocalStorage

http://www.baidufe.com/item/af0bb5872f2a1ef337ce.html