$localstorage doesn't work on Android device


#1

Hello!

I want to build an app that uses a JSON to get data and populate a ion-list with ion-item for each of my objects. This part I managed to accomplish well, but now I want to create another ion-list, maybe on top of this one (on the same page view) with favorite items.
For this I want to use $ionicActionSheet to mark any of the items in the first list as a favorite item.
How I want to accomplish this? Well I figured out that the favorites ones will be individual for each installation and the app has to know which are your favorite ones in order to populate the favorite list. So I want to go with ngStorage. But here is the problem where I got stuck.

How to implement this on a “Add to favorite” button on $ionicActionSheet to push the selected item (tap and hold on an item from first list) to the my favorite object that will contain ion-items ? Basically I want to duplicate that item into my new favorite ion-list.

Can someone please help me with this one?


#2

Ok so I started using this ngStorage using it on a function that is called under a

<ion-option-button  class="button-positive" ng-click="addFavorite(event)">Favorite
</ion-option-button>

That’s how I managed to push the current selected item into a $localstorage.favorite array from which I made a ng-repeat for the favorite list to display the items that are there(favorited).
Everything works like it should… until… I build the android file-debug(.apk) and install it on the phone where ngStorage doesn’t work??? The favorite list it doesn’t get populated at all… Does anyone know why is a different behavior regarding ngStorage? Why is not working on mobile app generated by ionic?

Should I try use only how it is described here: http://learn.ionicframework.com/formulas/localstorage/ ?
My problem is that I already have a service that gets a JSON file for displaying in the main list all the posts/items… The formula is not so easy to understand, and I don’t know if I should use AngularJS Service or simply Local Storage from that formula.


#3

Hello!
I hope someone will read my posts cause I’m feeling kinda lonely here… :frowning:
So I managed to do it by the book ( http://learn.ionicframework.com/formulas/localstorage/ ) using the angularjs way.

it works perfectly as I wanted, but only on desktop in Chrome / Chrome Emulator ( Google Nexus 5 ). After I build the apk for Android and install it on my device, it doesn’t seem to work at all.

What could be the problem?

Please reply when you can…


#4

Happy New Year to entire Ionic Community!

About this topic to be more specific I want to add some of my code lines that I used which is working on PC browser (Chrome) but doesn’t on my mobile device ( where I installed my app).

So I have edited 4 files.
First I inserted the factory in my services.js file:

angular.module('starter.storage', [])

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

Then in my app.js file I added the dependency name:

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'starter.storage'])
    .run(function ($ionicPlatform) {
        $ionicPlatform.ready(function () {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
              // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }
  
        });
    })

Then in controllers.js file I have this code, inserted under the controller that is loaded when I load the page view with my items in the list, in order to achive the favorite list that I mentioned in my earlier posts:

if ($scope.favlist) {
  console.log($scope.favlist);  
} else {
    $scope.favlist = [];
    $scope.favlist = $localstorage.getObject('favlist');
    $localstorage.setObject('favlist', $scope.favlist);
}
// Functions for 'favorite' button option on items in the list
    
$scope.addFavorite = function (event){
   
   $localstorage.setObject('favorit', event);
    console.log($localstorage.getObject('favorit'));
   $scope.favorite = $localstorage.getObject('favorit');
  if ($scope.favlist) {
      console.log($scope.favlist)
      $scope.favlist.push($scope.favorite); 
    $localstorage.setObject('favlist', $scope.favlist);
  } else {
      $scope.favlist = [];
     $scope.favlist.push($scope.favorite); 
      console.log($scope.favlist)
    $localstorage.setObject('favlist', $scope.favlist);
      console.log($scope.favlist)
  }
}
$scope.delFavorite = function (event) {
  $scope.favlist.splice(event, 1);
  $localstorage.setObject('favlist', $scope.favlist);
}

So for displaying favorited items in my page ( items.html ) I use this:

<ion-list can-swipe="true" show-delete="shouldShowDelete">       
          <div ng-class="{hidden: favlist.length == 0}" class="item item-divider" >Evenimente favorite</div>
              <ion-toggle ng-class="{hidden: favlist.length == 0}" ng-model="shouldShowDelete">
            Delete item from favorites
         </ion-toggle>
            
     <ion-item ng-repeat="event in favlist track by $index | limitTo:15  | filter:find" ui-sref="app.event({slug:event.slug})" class="item item-thumbnail-left">
             
                 <p>{{event.title}}</p>
             <ion-delete-button class="ion-minus-circled" ng-click="delFavorite(event)"></ion-delete-button>
            </ion-item>
</ion-list>

And the items that could be favorited ( those that have favorite button option are listed like this:

<ion-list>
      <div class="item item-divider" ng-class="{hidden: deAstazi.length == 0}">Evenimente recomandate astazi</div>
          <ion-item ng-repeat="event in deAstazi | limitTo:15  | filter:find" ui-sref="app.event({slug:event.slug})" class="item item-thumbnail-left">

          <h2 class="assertive">{{event.title}}</h2>          
            <ion-option-button  class="button-positive" ng-click="addFavorite(event)">
                    Favorite
            </ion-option-button>
        </ion-item>
</ion-list>

The controller for this page is loaded via .config (function ($stateProvider, $urlRouterProvider) { …

Can someone explain to me what I did wrong so that this works perfect on chrome ( no errors ) and not working on my device. ( or any other Android device )


#5

ok so everyone is watching my topic but none reply to it… that’s too bad.

Please someone delete this topic because it has no solution.


#6

hey,
i am using this:


and it works very well and iOS, chrome, android, firefox.

Could you check if $window.locaStorage is defined on your device?


#7

I will try to debug with weinre to see what could be the problem and report here.


#8

up… i had a same problem too… :frowning:


#9

Same issue with both angular-local-storage and ngStorage. My physical device is a Samsung S2. Works fine in chrome.


#10

Thanks for explanation. How about with more than one item to input local storage?


#11

A very late reply, but maybe some people having the same problem would benefit from it :slightly_smiling:

Android is more picky than Chrome, so in Chrome when you declare an Object, and push data to it, it is ok.
In Android it is not.

So you should declare an array [] in stead of an object {}

So initial declaration:
$scope.favorite = [];

Getting it from local storage:
$localStorage.getObject('favorite', '[]');

And then you can push…
favorite.push({id: index});