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

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



你可能感兴趣的:(跨平台移动开发实战(九)------移动端本地存储方案)