HTML5 Mobile Web 系列:善用 localStorage 快取網頁資料

window.localStorage 有 5MB 的容量,可以好好利用。

在 HTML5 相關技術中,web storage 提供開發者可以將一些資料,以 key-value 的形式儲存在用戶端(也就是瀏覽器啦),相較於 cookie 而言,cookie 只有 4kb 的容量,而且多數網站已經會預先塞一些資料在裡面,能利用的空間不大(而且在 JavaScript 端操作不易),所以有 5MB 容量的 web storage 當然要好好利用啦!

Web storage 與 cookie 有一樣類似的特性,就是它是跟著 domain name 而存在的,所以不必擔心儲存的資料被其它網站讀取走(當然,如果還是 XSS 那一樣會中招),使用的方式就直接操作 window.localStorage 物件即可(window 可以省略),以下有個範例:

Counter:



這段程式碼在 localStorage 物件下建立了一個 counter 屬性來儲存資料,在存取時可以使用 localStorage.counter, localStorage['counter'] 或是 localStorage.getItem('counter')。可以參考我以前寫過的文章

在 mobile web 中,如何減少網站 request 數以及讀取的資料量一直都是提升網站效能的關鍵,我們當然可以把很多東西儲存在 localStorage 裡作快取(至少可以快取 5MB,一個 mobile web 的頁面資訊量不會超過吧....),像是 CSS 或 JavaScript 的資料就十分合適,像是下面這段程式碼所描述(以 JavaScript 為例):