使用AngularJS保存修改过的json文件

Question

I'm creating a phonegap app with AngularJS that uses a .json file to store an array of entries. My aim is to allow the user to mark some of them as favorites, and then use that data somewhere else (another page with the favorites only, for example). First time doing a web development and I have to say I'm pretty new to web technologies such as AngularJS, JSON, PhoneGap, etc. (and I'm using them all), so maybe this question is a nonsense, but here I go anyway.

I've tried to save that data in an IndexedDB, in a WebSQL DB, in WebStorage.... but those approaches seem to be complex combined with PhoneGap, so I'm trying now to modify a field in the .json file and save the modified file.

I know JS can't write files, but I was trying to send the file by POST instead to fill that gap. Here's the code of the function I'm using:

$scope.save = function() {

    $http({
        method: 'POST',
        url: 'data.json',         //this is the json file with all the information I use
        data: $scope.json_data    //this contains the modified data
    }).success(function(response) {
        addLog("Success message.");
    }).error(function(response){
        addLog("Error message.");
    });
}

I don't want to write a lot of code to handle a request server side (I don't even know if PhoneGap will handle that...), since I honestly don't even know where to start to do that. I don't know if a transformRequest or another simple thing can allow me to save the json file... Any insights on what to do? Should I save the modified .json file with some magic code, or maybe I'm looking at this problem in the wrong way and should go down a different path?

Thanks!

Answer 1

You have several options you could use.

1. HTML5 localStorage API. That would probably be the easiest. It is key-value based, with string keys and string values. It is also extremely portable. Depending on how simple the app is, this may be the best. You set items either as a property of window.localStorage or using getKey / setKey . There is a ton of documentation and tutorials online about this.
   • Caveat: On Windows Phone 7, you cannot use dot notation. You must use the latter method.
2. Use the Cordova File API. It is less consistent across operating systems than localStorage , but it is still fairly dependable. Here's a link to more information.
   • Caveats: Beyond cross-operating system incompatibilities, you may also have to install it as a plugin. Here's the command: cordova plugin add org.apache.cordova.file .

Here's some useful links:

• https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md
• http://docs.phonegap.com/en/3.5.0/cordova_storage_storage.md.html
• http://docs.phonegap.com/en/3.5.0/cordova_plugins_pluginapis.md.html
• http://docs.phonegap.com/en/3.5.0/index.html