AngularJS local storage - initialize app retrieving local-stored data

Question

I'm pretty new to angular and I'm trying to avoid losing items added on a simple cart application when the user refreshes the page.

I'm using angularLocalStorage (https://github.com/agrublev/angularLocalStorage) but don't know how to retrieve it back the content. My lines:

var myApp = angular.module('ionicApp', ['ionic','angularLocalStorage']);
myApp.factory('prodottiData', function($http) {
  return {
    getFooOldSchool: function(callback) {
    $http.get('http://192.168.1.128/hongkongapp/?json=get_recent_posts&post_type=product&custom_fields=all').success(callback);
    }
  }
 });
myApp.factory('DataService', function() {
  var myCart = new shoppingCart("AngularStore");
  return {
    cart : myCart
  };
});
myApp.controller('MyController', function MyController ($scope, storage, $ionicSideMenuDelegate, prodottiData, DataService, $sce) {
    $scope.toggleLeft = function() {
    $ionicSideMenuDelegate.$getByHandle('mainMenu').toggleLeft();
  };
  $scope.toggleMySecondMenuLeft = function() {
    $ionicSideMenuDelegate.$getByHandle('mySecondMenu').toggleLeft();
  };
    //adding menu data to the scope object
    prodottiData.getFooOldSchool(function(data) {
        $scope.menu = data;
    });
    //adding the cart to the scope object
    $scope.cart = DataService.cart;
    $scope.to_trusted = function(html_code) {
        return $sce.trustAsHtml(html_code);
    }
    images = $scope.menu;
    $scope.showloader = function(){            
            $scope.shownImage = this.post.thumbnail_images.full.url;
            $scope.itemDesc = this.post.content;
            $scope.itemPrice = this.post.custom_fields._price[0];
            $scope.productName = this.post.title;
            $scope.skuProdotto = this.post.id;
        }
    });

Now, if I check local storage on the console I can see something is really stored, but I miss the way to re-populate the cart at startup.

Any help would be great!

Answer 1

You can use localStorage instead windows.localStorage.

 if(typeof(Storage)!=="undefined")
        {
            // Code for localStorage/sessionStorage.
            var hello = "Hello World!!";

            localStorage.setItem("hello",hello);
            // get string
            console.log(localStorage.getItem("hello")); // will return 'Hello World!!'


            var me = {name:'abel',age:26,gender:'male'};
            localStorage.setItem("user", JSON.stringify(me));
            //fetch object
            console.log(localStorage.getItem("user")); // will return {"name":"myname","age":99,"gender":"myGender"}
            var objetos = JSON.parse(localStorage.getItem("user"));
            console.log(objetos.name);

        }
        else
        {
            // Sorry! No Web Storage support..
        }

Answer 2

why not just using browser local storage ? you can add it to your services.js as a new service and just used that.

var storeService = myAppServices.factory('storeService', function() {

    var service =
    {
        setClientData:function(client_details)
        {
            window.localStorage.setItem( "client_data", JSON.stringify(client_details) );
            client_data = client_details;
        },
        getClientData:function()
        {
            if (client_data == null)
            {
                client_data = JSON.parse(window.localStorage.getItem("client_data"));
            }
            return client_data;
        }
    }

    var client_data = null;

    return service;
});

Answer 3

From the documentation, to retrieve, it's storage.get('key')

So, to check after refresh:

if (storage.get('someKey')){
  $scope.retrieved_value = storage.get('someKey');
}else{
// whatever
}