Can I use $localstorage like an object array?

ionic-v1
1

Hi,

Can I use $localstorage like I do an object array? Can I do ng-repeat on it to list up all the stored objects? And how would I go about to delete from local storage?

And lastly;

Is $localstorage already in Ionic or do I have to manually add it? I was a little confused by the explanation from this site: http://learn.ionicframework.com/formulas/localstorage/

2

It doesn’t come by default with Ionic you can install $localstorage using any one of the below commands
bower install ngstorage
npm install ngstorage

Please follow this link https://github.com/gsklee/ngStorage it has how to store and delete the object to localstorage .

For example if you are saving name to localstorage the syntax is
$localstorage.name = “SampleName”

Inorder to delete the name from localstorage user
delete $localstorage.name

1 Like
3

Awesome! And how about using it as a object array? Will I be able to run a ng-repeat on the local storage?

4

Bind the localstorage object to a $scope variable and use it to bind with ng-repeat

5

@Praveena It does not seem to store the value when I refresh the browser or restart Ionic View on my phone. I followed the instructions from GitHub (https://github.com/gsklee/ngStorage). Am I missing something?

This is what I do:
From the controller:

$scope.$storage = $localStorage;
//This function collect data from an API and stores it in the object I want to have stored.
//myPopup function is what will have the most relevant information I think
$scope.showPopup = function() {

    var i = 0;
    //Pictures array stores 10 hits with URL of images
    $scope.pictures = [];
    //newitem is the new object pushed to items array
    $scope.newitem = {}

    $scope.getPic = function(name) {

        $http.get('https://www.googleapis.com/customsearch/v1?key=AIzaSyDKzJO_2-a82Jrn0sA2oSnDgHORcJegCAA&cx=011061616694035020478:dvpxju__yje&searchType=image&lr=lang_no&q=' + name).then(function(resp) {
            console.log('Success', resp.data.items);
            $scope.pictures = resp.data.items;
            $scope.newitem.pic = resp.data.items[0].image.thumbnailLink;
        })

        $scope.changePic = function() {

            if (i == 10) {

                i = 0;

            } else {
                i++;
            }
            $scope.newitem.pic = $scope.pictures[i].image.thumbnailLink;

        }

    }

    var myPopup = $ionicPopup.show({
        template: '<form ng-submit="getPic(newitem.name)"><input type="text" placeholder="Item name" ng-model="newitem.name" ng-blur="getPic(newitem.name)"></br><input type="number" placeholder="Amount" ng-model="newitem.amount"></br><img alt="Press me!" src="{{newitem.pic}}" style="display:block;width:100px;height:100px;margin-left:auto;margin-right:auto;" ng-click="changePic()"></form>',
        title: 'Add new item to list',
        subTitle: 'Tip:Tap the image to change it',
        scope: $scope,
        buttons: [{
            text: 'Cancel'
        }, {
            text: '<b>Save</b>',
            type: 'button-positive',
            onTap: function(e) {
                $scope.$storage.storedItems.push($scope.newitem);
            }
        }]
    });
}
//This is where the object array is instansiated.
$scope.$storage.storedItems = [



];

From the html:

<ion-list show-delete="data.showDelete">
        <ion-item class="item item-thumbnail-left item-remove-animate" ng-repeat="item in $storage.storedItems" href="#">
            <ion-delete-button class="ion-minus-circled" ng-click="$storage.storedItems.splice($index, 1)">
            </ion-delete-button>
            <img src="{{item.pic}}">
            <b><h2>{{item.name}}</h2></b>
            <b><h2>{{item.amount}}</h2></b>
            <button id="addButton" class="button button-icon icon ion-ios-plus-outline verticAlign" ng-click="moveToItems(item)">
            </button>
        </ion-item>
6

I solved it. It was the : $scope.$storage.storedItems = []; that ended up resetting the local storage. I just removed it and it worked. :slight_smile: