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 plex bined 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!

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 plex bined 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!

• javascript
• json
• angularjs
• cordova

Share Improve this question Follow asked Aug 4, 2014 at 20:06 MurrayMurray 7311 silver badge55 bronze badges 4

• I don't know much about phonegap, but for on-client storage I remend ngStorage from one of creators of Angular. You can operate it just like $scope, but it is persistent. Just inject $localStorage of $sessionStorage to your Controller. – srigi Commented Aug 4, 2014 at 20:09
• @srigi I suggested a series of things that wouldn't require much in the realm of libraries. localStorage could be as simple as window.localStorage.setKey('userPrefs', JSON.stringify(userPrefsObj);. – Claudia Commented Aug 4, 2014 at 20:51
• @srigi I've never really been the heavy JS library user. My first instinct is to use native methods, and then I'll use libraries if it gets too ridiculous to do without (I've only jumped after two libraries in my pet projects: async and RSVP.js). I'm familiar with several, but never really used many. – Claudia Commented Aug 4, 2014 at 20:57
• I think you shouldn't be worried using ngStorage. It is just 100 lines long, about 20 are ments. If you try to use native localStorage in AngularJS, you end up building some "connector code" of boilerplate to use localStorage in Angular way. Why to do that, if that was already invented? And again, it is proven, tested, lightweight & from core contributor. No-brainer for me. – srigi Commented Aug 5, 2014 at 6:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 inpatibilities, you may also have to install it as a plugin. Here's the mand: cordova plugin add org.apache.cordova.file.

Here's some useful links:

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