1

I just need to store an array in localStorage and keep adding elements to that array so I could retrieve that stored array in my application. This must be a very simple thing to do with Angular Local Storage Module but it has got me troubling quite a bit, and I am hoping to get some help on this.

Following is the angular code I have that I am using to store a queries into localStorage using angular-local-storage module:

.factory('QueryService', ['localStorageService', function(localStorageService) {
        var queries = [];
        var factory = {};

        factory.addQuery = function(query) {
            queries.push(query);

            localStorageService.set('queries', queries);
            return localStorageService.get("queries");
        };
        return factory;
    }])

Every time I add a query to the queries array, I get only the last element added returned in the result. So basically, localStorageService.get("queries") is giving me the last element added to the queries array.

Could somebody please help me understand that why am I getting only the last element I am adding to the queries array returned?

EDIT: After each element I am adding to the queries array I am refreshing the browser.

skip
  • 12,193
  • 32
  • 113
  • 153
  • 1
    Does the _AngularJS_ localStorage module automatically `stringify` and `parse` your array for you. It's my understanding that localStorage only supports strings at this time. Therefore a conversion is needed (usually using `JSON.stringify` and `JSON.parse`). I wrote this up in a previous [answer](http://stackoverflow.com/questions/16083919/push-json-objects-to-array-in-localstorage/16084772#16084772) (outside of _AngularJS_). Not sure if the pre-built module covers that for you or not... – War10ck Oct 09 '14 at 17:31
  • 1
    With regards to your edit, are you refreshing the browser before or after you store the contents in localStorage? – War10ck Oct 09 '14 at 17:32
  • @SnareChops & @War10ck: Is it possible that refreshing the browser in between adding new elements to the `queries` array cleans up the `queries` array? – skip Oct 09 '14 at 17:33
  • @War10ck: I am not sure about that, let me try it that way as well. – skip Oct 09 '14 at 17:34
  • @War10ck: Yes, I need to do that before I add each element to the array. – skip Oct 09 '14 at 17:35
  • Shouldnt var queries = localStorageService.get("queries"); – smk Oct 09 '14 at 17:36
  • 1
    In answer to your question above in the comments yes, this is entirely possible. If you want the `queries` array to keep all the data (old and new) you'll need to first try and fetch the queries array from localStorage. If it exists, pull the existing content into an array, update the array and push all of the contents back into localStorage. If it's not in localStorage (indicating this is the first iteration of the process) create the array, fill in the new value and push it to localStorage. For all successive requests you'll need to repeat the first step. – War10ck Oct 09 '14 at 17:37

1 Answers1

3

Normally you can not store arrays directly with localStorage. But angular-local-storage does this work for you as seen on this line: https://github.com/grevory/angular-local-storage/blob/ed422c04764d4981a48f4c40859d65087b1b9838/src/angular-local-storage.js#L119

The clue to answer your question is that you are refreshing your browser after adding an element, so the queries array does indeed get cleaned up. A browser refresh actually wipes out all of your JavaScript values and the controller even your whole AngularJS application gets restarted.

To make your code work you have to initialize the queries array in the first line of your controller:

.factory('QueryService', ['localStorageService', function(localStorageService) {
        var queries = localStorageService.get('queries') || [];
        var factory = {};

        factory.addQuery = function(query) {
            queries.push(query);

            localStorageService.set('queries', queries);
            return localStorageService.get("queries");
        };
        return factory;
    }])
DanEEStar
  • 6,140
  • 6
  • 37
  • 52