在PhoneGap IOS上缓存图像的最佳方法

Question

I'm building a PhoneGap ios app that used to import data from the server using JSON, this data contains image URL, I have already used to cache the data in the local storage to use it when the application is out of internet connection but I have one concern is about what is the best way to cache images.

I was thinking of converting the images to data-uri and save it to IOS DataBase.

Please advice if this solution is doable or is there any other best solutions?

Answer 1

这篇博文应该让你走在正确的轨道上https://www.raymondcamden.com/2012/01/19/Downloading-files-to-a-PhoneGap-application-Part-1/

Answer 2

The Phonegap API has a file system that you can use to store images downloaded from remote servers, that might be your best option ?

The files would be stored in the App's Documents folder, so you would need to find that path (which is different from each install to the next) then save the file locally and save the path in localstorage.

Here is a code snippet- Firstly it makes and saves a dummy.html file in order to workout the local path - then it downloads the file -

function downloadFile(webURL,webFilename){
    window.requestFileSystem(
                             LocalFileSystem.PERSISTENT, 0,
                             function onFileSystemSuccess(fileSystem) {
                             fileSystem.root.getFile(
                                                     "dummy.html", {create: true, exclusive: false},
                                                     function gotFileEntry(fileEntry){
                                                     var sPath = fileEntry.fullPath.replace("dummy.html","");
                                                     var fileTransfer = new FileTransfer();
                                                     fileEntry.remove();

                                                     fileTransfer.onprogress = function(result){
                                                     var percent =  result.loaded / result.total * 100;
                                                     percent = Math.round(percent);
                                                     console.log('Downloaded:  ' + percent + '%');
                                                     };

                                                     fileTransfer.download(
                                                                           webURL,
                                                                           sPath + webFilename,
                                                                           function(theFile) {
                                                                           console.log("download complete: " + theFile.toURL());
                                                                           showLink(theFile.toURL());
                                                                           },
                                                                           function(error) {
                                                                           console.log("download error source " + error.source);
                                                                           console.log("download error target " + error.target);
                                                                           console.log("upload error code: " + error.code);
                                                                           navigator.notification.alert('Seems to be an error downloading this background. Try again later.', null, 'Error', 'OK');
                                                                           }
                                                                           );
                                                     },
                                                     fail);
                             },
                             fail);

}

function showLink(localurl){
    console.log(localurl);
}