跨平台移动开发实战（九）------移动端本地存储方案

虽然数据都有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");