service data should not remove , while refresh the page using angularjs

Question

• I have two separate page controller then assign the data on service in first controller . That service data i can use from second controller(another page ) But if refresh the page(second controller page) , that service data displaying as undefined

  // Controller 1

  app.controller("pageCtrl",['$scope','pojo' , function( $scope,pojo)
  {
  
    pojo.setpgeCtrlScope($scope);
  
  }
  ]);
  

  // Controller 2

  app.controller("pageCtrl2",['$scope','pojo' , function( $scope,pojo)
  {
  
   pojo.getpgeCtrlScope();
  
  }
  ]);
  

  // pojo service

  app.service("pojo",function()
  {
    var page1Data;
    this.setpgeCtrlScope = function(data)
    {
      page1Data = data;
     }
    this.setpgeCtrlScope = function()
    {
      return page1Data;
    };
  });
  

Please give the suggestion for above problem. any other way to pass the data to 2nd controller . and that one should not remove while refresh the page

      Thank you !!

Answer 1

This data is in memory. If you refresh the page you will loose it.

You can use some approaches, like storing the data in your service in a cache, local storage, etc.

For example:

app.service("pojo", function() {
    var page1Data = getSavedData(); //A method to retrieve the data from a cache or storage
    this.setpgeCtrlScope = function(data) {
        page1Data = data;
        saveData(page1Data); //A method to save the data to the cache or storage
    }
    this.getpgeCtrlScope = function() {
        return page1Data;
    };
});

This way everytime the service is loaded (after a page refresh) it's going to retrieve the data previously saved.

Regarding the storage, there are a lot of options. This one is really easy to use:
HTML5 Local Storate

There are a myriad solutions and implementations for this. I gave you only one example to guide you.