0

I'm trying to implement a simple search engine in Angular 2. I have a component with a search field and a list of results leading to external URLs (to pages that are not part of the app) below the search field.

Let's say the user enters some search text, gets results from a service call in the background and then clicks on one of the results links which takes him to an external site. Then he perhaps decides to try some other result, so he clicks the Back button of his browser to get back to the search results. But the problem is that at this point the whole app gets reinitialized which means that the previous results are gone and the app just displays an empty search field as if it was opened for the very first time.

So, my question is: how do I preserve the state of the app across navigations to external sites? Do I have to use the Router and store the search string in the route? Or do I have to save the state somehow and restore it when the user returns back to the app? What is the recommended way of handling this use case?

mschuster
  • 191
  • 2
  • 8
  • *Do I have to use the Router and store the search string in the route?* Yes. – JB Nizet Nov 01 '16 at 15:12
  • Possible duplicate of [Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?](https://stackoverflow.com/questions/39533291/angular2-router-2-0-0-not-reloading-components-when-same-url-loaded-with-differe) – kathikeyan A Aug 16 '18 at 14:49

2 Answers2

1

If I understand it correct, you need your webpage's data to reappear as your left, when you navigate from your angular app (say http://your-angular-app.com) to an external/alien website (say http://alien-site.com) and navigate back to your angular app (http:..your-angular-app.com) by clicking the browser's 'back' button.

If thats the case, there are two possiblities that I can think of

  1. Using HTML5 localStorage

Assume you have an input element like the following on your html page

<input [(ngModel)]="fieldModel1"></input>

And your component be,

export class YourComponent implements OnInit {
  public fieldModel1;

  @HostListener('window:beforeunload', ['$event'])
   unloadNotification($event: any) {
    localStorage.setItem('fieldName1',this.fieldModel1)
    // and so on ...
  }

  constructor() {}

  // your code ....
}

and on page load you can fetch values from local storage and populate your screen

ngOnInit() {
   if(localStorage.getItem('fieldName1')) {
     this.fieldModel = localStorage.getItem('fieldName1');
   }
   // and so on ...
}
  1. post form data to server on page unload and fetch it on page load - typically use server instead of localStorage
kathikeyan A
  • 1,668
  • 2
  • 16
  • 31
0

You could store the state in localstorage. For instance if you make a search you can navigate to a url like this.

yourdomain.com/search?query=string

This will represent a route in Angular 2 this route will make the search. Then use the query as key and store the state (result) for that key. If you navigate to that url again you can load the state from localstorage with that key. Of course you need handle clearing old results but that's details.

Arin
  • 632
  • 6
  • 16