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?

Sebaceous

In that case you can only use local storage or cookies – Hydroxylamine

Refresh means browser refresh, or do you navigate to a different view in the SPA? – Venturesome

@Venturesome . browser refresh. – Sebaceous

Answer 1

You can make use of angular local storage

Angular Local Storage

Example how to use it:

Example To Use Local Storage

Mejias

Answer 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.

Aboveground

Answer 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?

Mccurdy

Answer 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

Passably