Ionic/Angular: Read and Write Array in Local Storage

Question

I'm working with Ionic framework as part of an online course I'm taking to learn AngularJS and a great many other tools useful to a web developer. And, being the sort of advanced beginner type, I'm stuck. In this unit, we've learned to leverage local storage to persist data locally so we can get our favourite items even after the app is shut down. However, I have trouble getting that to work.

So here's what I've done:

The Failed Attempt

I can get data into local storage. And I can append data. I do this using this function:

$scope.favoriteData = $localStorage.getObject('favorites', '[]');

$scope.addFavorite = function (index) {
    console.log('Current Favorites', $scope.favoriteData);
    $scope.favoriteData =  Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
    console.log ($scope.favoriteData);
    $scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');
    console.log ($scope.favoriteData);
    $localStorage.storeObject('favorites', $scope.favoriteData);
    console.log('Added Favorite', $scope.favoriteData)
};

In local storage, this produces the following entry:

favorites: ["'{id':0},","'{id':1},"]

So far so good. However, this is useless. Because I need this object to have the following format:

favorites: [{'id':0}, {'id':1}]

and so on. Also, I should not be able to add duplicates. I have a kind of function for that elsewhere, but I am stuck on how to combine the two functions.

The function I have is this:

function (index) {
        for (var i = 0; i < favorites.length; i++) {
            if (favorites[i].id == index)
                return;
        }
        favorites.push({
            id: index
        });
    };

The problem with this is, I don't understand how it does what it does.

So please, help?

EDIT #1:

The Second Attempt

With the help of @Muli and @It-Z I'm working with the following code right now:

$scope.favoriteData = $localStorage.getObject('favorites', '[]');

$scope.addFavorite = function (index) {
    console.log('Current Favorites', $scope.favoriteData);
    $scope.favoriteData =  Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
    console.log ($scope.favoriteData);
    for (var i = 0; i < favorites.length; i++) {
        if (favorites[i].id == index) {
            console.log ("Found duplicate id " + favorites[i].id);
            return;
        }
    }
    $scope.storeVar = $scope.favoriteData.push({id: index});
    console.log ($scope.favoriteData);
    $localStorage.storeObject('favorites', $scope.favoriteData);
    console.log('Added Favorite', $scope.favoriteData)
};

However, this doesn't work because with a nonexistant key favorites, it doesn't work and gives me an error. So I need to implement a check if the key exists and if it doesn't, then it should create one. I've looked at this question, but it didn't work, mainly because I must use the following factory in services.jsto access local storage:

.factory('$localStorage', ['$window', function ($window) {
    return {
        store: function (key, value) {
            $window.localStorage[key] = value;
        },
        get: function (key, defaultValue) {
            return $window.localStorage[key] || defaultValue;
        },
        storeObject: function (key, value) {
            $window.localStorage[key] = JSON.stringify(value);
        },
        getObject: function (key, defaultValue) {
            return JSON.parse($window.localStorage[key] || defaultValue);
        }
    }
}])

So this is where I'm at right now. And I'm still stuck. Or again stuck. I don't know.

Answer 1

First of all, this line:

$scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');

Should be:

$scope.storeVar = $scope.favoriteData.push({id: index});

This is because in the original line you are pushing string into favoriteData while you wanted objects.

And if you want to check first for duplicates your can go with somthing like this:

$scope.favoriteData = $localStorage.getObject('favorites', []);

$scope.addFavorite = function (index) {
    console.log('Current Favorites', $scope.favoriteData);
    $scope.favoriteData =  Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
    console.log ($scope.favoriteData);
    for (var i = 0; i < favorites.length; i++) {
        if (favorites[i].id == index) {
            console.log ("Found duplicate id " + favorites[i].id);
            return;
        }
    }
    $scope.storeVar = $scope.favoriteData.push({id: index});
    console.log ($scope.favoriteData);
    $localStorage.storeObject('favorites', $scope.favoriteData);
    console.log('Added Favorite', $scope.favoriteData)
};

Answer 2

$localStorage handles serialization and deserialization for you so there's no need for $scope.favoriteData = $localStorage.getObject('favorites', '[]');

You can just call:

$scope.favoriteData = $localStorage.favoriteData || {/*Defaults object*/};

Same goes for saving data. use the dot notation.

Check the demo.

As for the duplicates: just handle them yourself like you would normally. when you're done call $localStorage.mySet = modifiedSet (modified set is standard JS object).

Note: this assumes you use ngStorage.