Geek Answers Handbook

Ionic / Angular: reading and writing an array in local storage

I work with the Ionic framework as part of an online course that I take to learn AngularJS and many other tools useful for web developers. And being a kind of advanced newbie, I'm stuck. In this module, we learned how to use local storage for local data storage, so that we can receive our favorite items even after closing the application. However, I have problems with work.

So here is what I did:

Unsuccessful attempt

I can get data in local storage. And I can add 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) };

The following entry is created in local storage:

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

So far so good. However, it is useless. Since I need this object in order to have the following format:

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

etc. In addition, I should not add duplicates. I have some kind of function for this elsewhere, but I'm fixated on how to combine the two functions.

I have a function:

 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 that I do not understand how he does it.

So please help?

EDIT # 1:

Second attempt

Using @Muli and @ It-Z, I am now working with the following code:

 $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 does not work, because it does not work with the nonexistent favorites key and gives me an error. Therefore, I need to implement a check if the key exists, and if not, then it must create it. I have considered this question, but it did not work, mainly because I have to use the next factory in services.js to access the local store:

 .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 that's where I am now. And I'm still stuck. Or stuck again. I dont know.

+6
source share
2 answers

First of all, this line:

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

Must be:

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

This is because in the original row you insert the row into favoriteData as long as you want the objects.

And if you want to check for duplicates first, you can go with something 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) };
+2
source

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

You can simply call:

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

The same goes for data storage. use dot notation.

View the demo.

As for duplicates: just process them yourself, as usual. when you finish calling $localStorage.mySet = modifiedSet (the modified set is a standard JS object).

Note: it is assumed that you are using ngStorage.

+2
source

More articles:


All Articles