Retain page data on refreshing the page

Question

I am new to angular. I am using a service which gets a list of objects and displays them on the 1st page. Then based on what object was clicked, I am setting the tab header on the next page. But while I am refreshing the page the scope of the list is lost and the tab header is throwing the exception resulting the page to not display the information. Is there any way to retain the information that which object was clicked on previous screen even when refreshing the 2nd page?

Solution 1

You can make use of angular local storage

Angular Local Storage

Example how to use it:

Example To Use Local Storage

Solution 2

If you are new to Angular and working on non-mission-critical project an additional call to the remote service is not the end of the world.

Is there any way to retain the information what object was clicked on previous screen even when refreshing the 2nd page ?

Are you using routing in your app?

See example: http://plnkr.co/edit/Svg4Po13hMq7WxzNwKDc?p=preview

Controllers

app.controller("main", function($scope) {
    $scope.items = [1,2,3,4];
}); 
app.controller("detail", function($scope, $routeParams) {
    $scope.myvalue = $routeParams.id;
});

Routing configuration

var app = angular.module("app", ['ngRoute']);
app.config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'main',
        controller: 'main'
      })
      .when('/detail/:id', {
        templateUrl: 'detail',
        controller: 'detail'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

---

When you refresh details page it remembers it's state. Then you can ask service for data.

Solution 3

Do you have several angularjs apps? In theory you should have a single HTML file and partials / controllers, you can store the data you want to use in a factory (singleton) or angularJS cache, if you are going to navigate between several HTML pages you can use local storage or reload the data from server.

Some useful links:

$cache

https://docs.angularjs.org/api/ng/service/$cacheFactory

Local storage:

How do I store data in local storage using Angularjs?

Solution 4

The best practice to handle these kind of scenarios is through combination of angular service + localstorage

• Service will help you to transfer data between two pages / controllers.
• And saving that data to localstorage will help you to get that data on page refresh

And if the data is just the id in url then answer by @Michal Stefanow is fine also.

Helping link

• Data Between controllers through service

View more solutions