html5本地存儲在手機web app中使用探討

　　前段時間參與了一個手機app嵌入webview應用的項目，感觸頗多。正如前一篇博文“html5+css3方式實現(xiàn)mobie app的一些瓶頸”所述，存在用web方式實現(xiàn)確實存在很多瓶頸。

　　最近研究了下競爭對手的一款mobie　app產(chǎn)品，存在一些值得學習和改進的地方：其首頁（列表頁）將所有的商品信息都請求下來，所以耗時會比較長。但由于是native　app，有程序啟動畫面和loading圖片的存在，再加上手機用戶對加載速度有心理預期，所以對用戶體驗影響不大。由于其對所有商品信息的緩存，用戶由首頁進入詳情頁后就可以將緩存的信息先展示給用戶（而且緩存的信息剛好占滿手機的一屏），其他內(nèi)容隨后加載。這樣，用戶由首頁進入商品頁和分類列表頁時，給用戶的感覺是相當之快。

　　他們用到的技術(shù)也沒什么特別，也就是常說的本地存儲。個人感覺，客戶端做本地存儲是相對容易的一件事情。html５的新特性中不是支持了對本地存儲的功能嗎，對于老版本不支持的本地存儲的設(shè)備可以不用存儲，也能達到優(yōu)雅降級。故html５本地存儲可以一試。

　　html５提供的本地存儲的相關(guān)內(nèi)容可以分為兩個部分：客戶端數(shù)據(jù)存儲和離線存儲。

　　客戶端存儲有l(wèi)ocalStorage, sessionStorage, Client-Side Database三種。localStorage和sessionStorage是簡單的鍵值對存儲，類似web中經(jīng)常用到的cookie，也是通過js設(shè)置name和value；不同的是cookie會發(fā)送到服務器，并且其數(shù)量和大小有相應的限制。Client-Side Database則相對更強大一些，可以在本地進行創(chuàng)建數(shù)據(jù)庫、本地數(shù)據(jù)庫表進行增刪查改等操作。

　　離線存儲則是通過manifest文件對本地文件和需要服務器加載的文件進行配置，一般會對靜態(tài)頁、css、js、圖片等靜態(tài)文件進行離線存儲類似于用瀏覽器在本地跑一個靜態(tài)頁面。當然好處是一些不變更的靜態(tài)文件可以直接放在本地，而不需要從服務器端獲取。

　　回到項目本身，我需要做的是將列表頁面的數(shù)據(jù)緩存下來，然后在商品頁預先顯示出來，其他的數(shù)據(jù)再自行加載。這里我們可以通過使用客戶端存儲技術(shù)將所需的數(shù)據(jù)存儲在本地，但問題是讀取本地存儲的操作是在js中進行的，而js賴以存在的商品頁面不是存在本地的，而是需要和服務器建立連接從服務器獲取的。而和服務器建立連接所花費的時間正是我們的瓶頸所在，本地存儲的所產(chǎn)生的好處（一個html頁面中少請求的一些字節(jié)）相比于此完全可以忽略不計。

　　再看看離線存儲，我們倒是可以將一些持久化的css、js和圖片放在本地通過manifest文件的配置，而無需從服務器端獲取。但是也沒有達到我們的項目需求。

　　至此，我看出來一些門道：B/S, C/S兩種開發(fā)模式雖說有很多相同相似的地方，但其各自優(yōu)缺點決定了其適合開發(fā)何種形式的程序。html作為web開發(fā)語言是為B/S開發(fā)服務的，即使html５提供了強大的一些特性，也是為web提供的，木有考慮到客戶端開發(fā)。

　　不過，html５在制作mobile本地離線應用還是有較強的支持的，canvas、本地數(shù)據(jù)庫對于制作本地應用還是提供相當大的便利。