Can I use $localstorage like an object array?



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:


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 it has how to store and delete the object to localstorage .

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

Inorder to delete the name from localstorage user
delete $


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


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


@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 ( 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
    $ = [];
    //newitem is the new object pushed to items array
    $scope.newitem = {}

    $scope.getPic = function(name) {

        $http.get('' + name).then(function(resp) {
            $ =;
            $scope.newitem.pic =[0].image.thumbnailLink;

        $scope.changePic = function() {

            if (i == 10) {

                i = 0;

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



    var myPopup = ${
        template: '<form ng-submit="getPic("><input type="text" placeholder="Item name" ng-model="" ng-blur="getPic("></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) {
//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)">
            <img src="{{item.pic}}">
            <button id="addButton" class="button button-icon icon ion-ios-plus-outline verticAlign" ng-click="moveToItems(item)">


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: