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

转自：http://blog.csdn.net/cutesource/article/details/7774232

虽然数据都有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格式，得自行做一些转化，如下例所示：

[javascript]  view plain copy

1. 存：  
2. window.localStorage.setItem(getLocalKey("stMobileCrList"), JSON.stringify(crFilter));  
3. 取：  
4. var crFilter = window.localStorage.getItem(getLocalKey("stMobileCrList"));  
5. 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）：

[javascript]  view plain copy

1. window.requestFileSystem(  
2.     LocalFileSystem.PERSISTENT, 0, function onFileSystemSuccess(fileSystem) {  
3.         fileSystem.root.getDirectory(dirName, {create: true, exclusive: false}, function(dirEntry){  
4.             var dirPath = dirEntry.fullPath;  
5.             console.log(dirPath);  
6.             var fileTransfer = new FileTransfer();  
7.             var filePath = dirPath +"/"+ fileName;  
8.             fileTransfer.download("http://"+host+":"+httpPort+"/syncFile?token="+token+"&id="+id, filePath,  
9.                  function(theFile) {  
10.                     console.log("download complete: " + theFile.toURI());  
11.                  },  
12.                  function(error) {  
13.                      console.log("download error source " + error.source);  
14.                      console.log("download error target " + error.target);  
15.                      console.log("upload error code: " + error.code);  
16.                  }  
17.              );  
18.         }, fail);  
19.        },   
20. fail);  

这段代码在Android和IOS上都没问题，它就是一个标准的创建并写文件的操作，Phonegap实际上就是通过plugin把js的调用转化为native的File操作，具体phonegap实现机理我会在单独在分析phonegap内核这个部分里详细分析。但Phonegap在其他平台上如webos就支持不太好，没有完全实现HTML File API，因此需要借助与Webos本身的File API，比如file picker service能完成对本地文件系统的访问：

[javascript]  view plain copy

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