跨平臺移動開發實戰（九）------移動端本地存儲方案

雖然數據都有Server端提供，但移動程序開發一般都需要支持offline使用模式，因此需要移動客戶端本地存儲數據，我按數據類型不同分爲三種實現方案：

• 簡單數據（key-value）：HTML5 Web Storage
• 複雜數據（SQL）：HTML5 Web SQL Database
  
• 二進制文件（File）：File API & Phonegap plugin

1）簡單數據（key-value）

對於一般的簡單數據存儲，我推薦用key-value，一個是保持數據結構簡單，另外就是HTML5 Web Storage從測試情況來看在各個平臺上支持非常好，從http://www.html5rocks.com/en/features/storage也可以查詢到支持情況：

具體使用我就不多說，但需要強調的是，web storage api是基於字符串，如果數據是json格式，得自行做一些轉化，如下例所示：

存：
window.localStorage.setItem(getLocalKey("stMobileCrList"), JSON.stringify(crFilter));
取：
var crFilter = window.localStorage.getItem(getLocalKey("stMobileCrList"));
crFilter = JSON.parse(crFilter);

2）複雜數據（SQL）

現在很多平臺的瀏覽器也內置了數據庫，並基於HTML5 Web SQL Database API來暴露使用接口，支持情況沒有web storage好，從上圖可知，還不能在IE10上應用，這就導致會在WP上有問題。

3）二進制文件（File）

存儲File就需要通過JS訪問本地文件系統，傳統的瀏覽器由於安全限制沒有提供這個能力，但HTML5提供了File access的標準制定，很多平臺瀏覽器也通過沙箱的形式開始支持這個特性，不過這塊支持情況不太好：

基本上在移動平臺上都不能支持File API，因此在移動平臺上需要採取其他方法，幸好，Phonegap基於 HTML5的標準提供了在移動平臺上的支持，如下例代碼所示（Android/IOS）：

window.requestFileSystem(
    LocalFileSystem.PERSISTENT, 0, function onFileSystemSuccess(fileSystem) {
        fileSystem.root.getDirectory(dirName, {create: true, exclusive: false}, function(dirEntry){
            var dirPath = dirEntry.fullPath;
            console.log(dirPath);
            var fileTransfer = new FileTransfer();
            var filePath = dirPath +"/"+ fileName;
            fileTransfer.download("http://"+host+":"+httpPort+"/syncFile?token="+token+"&id="+id, filePath,
                 function(theFile) {
                    console.log("download complete: " + theFile.toURI());
                 },
                 function(error) {
                     console.log("download error source " + error.source);
                     console.log("download error target " + error.target);
                     console.log("upload error code: " + error.code);
                 }
             );
        }, fail);
       }, 
fail);

這段代碼在Android和IOS上都沒問題，它就是一個標準的創建並寫文件的操作，Phonegap實際上就是通過plugin把js的調用轉化爲native的File操作，具體phonegap實現機理我會在單獨在分析phonegap內核這個部分裏詳細分析。但Phonegap在其他平臺上如webos就支持不太好，沒有完全實現HTML File API，因此需要藉助與Webos本身的File API，比如file picker service能完成對本地文件系統的訪問：

enyo.windows.openWindow("filepicker.html", "File Window");