Cross-platform mobile development practice (9)-mobile local storage solution

Although data is provided on the Server side, mobile development generally needs to support the offline usage mode. Therefore, you need to store data locally on the mobile client. There are three implementation solutions based on different data types:

• Key-value: HTML5 Web Storage
• Complex data (SQL): HTML5 Web SQL Database
• Binary File: File API & Phonegap plugin

1) simple data (key-value)

For general simple data Storage, I recommend using key-value. One is to keep the data structure simple, and the other is that HTML5 Web Storage supports very well on various platforms in terms of test conditions. From http://www.html5rocks.com/en/features/storageyou can also query the support conditions:

I will not describe the specific usage, but it should be emphasized that the web storage api is based on strings. If the data is in json format, You have to convert it yourself, as shown in the following example:

Save: window. localStorage. setItem (getLocalKey ("stMobileCrList"), JSON. stringify (crFilter); var crFilter = window. localStorage. getItem (getLocalKey ("stMobileCrList"); crFilter = JSON. parse (crFilter );

2) complex data (SQL)

Currently, browsers on many platforms also have built-in databases and expose interfaces for use based on HTML5 Web SQL Database APIs. The support conditions are not as good as web storage. We can see that they cannot be applied on IE10, this causes a problem on WP.

3) binary File)

To store files, you need to access the local File system through JS. Traditional browsers do not provide this capability due to security restrictions, but HTML5 provides File access standards, many platform browsers also start to support this feature in the form of sandbox, but this support is not very good:

Basically, File APIs are not supported on mobile platforms. Therefore, other methods are required on mobile platforms. Fortunately, Phonegap provides support on mobile platforms based on HTML5 standards, the following code is used (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);

This code is fine for Android and IOS. It is a standard File creation and writing operation. Phonegap actually converts js calls to native File operations through plugin, the specific implementation mechanism of phonegap will be analyzed in detail in the analysis of the phonegap kernel. However, Phonegap does not fully support HTML File APIs on other platforms, such as webos. Therefore, you need to use the File APIs with Webos, for example, the file picker service can access the local file system:

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