Angular capture brwoser back button and set redirect to another URL && window popstate event in browser

 

Window: popstate event

Bubbles	No
Cancelable	No
Interface	PopStateEvent
Event handler property	onpopstate

https://developer.mozilla.org/en-US/docs/Web/API/Window/popstate_event

This event captures browser back or forward button action

Angular capture this browser back button event, and set redirect to different url:

Try this one. Import HostListener

import { Component, HostListener } from '@angular/core';

And then bind event

@HostListener('window:popstate', ['$event'])
onBrowserBackBtnClose(event: Event) {
    console.log('back button pressed');
    event.preventDefault(); 
    this.router.navigate(['/home'],  {replaceUrl:true});
}

https://stackoverflow.com/questions/58185653/change-route-using-browser-back-button-in-angular-6

If want to reload compnent of this redirected new URL :

@HostListener('window:popstate', ['$event'])
onBrowserBackBtnClose(event: Event) {
    console.log('back button pressed');
    event.preventDefault(); 
    this.router.navigate(['/home'],  {replaceUrl:true});

   setTimeout(
    () => {
location.reload();
}
    )
}


Second way:
constructor(router: Router) {
    router.events
      .subscribe((event: NavigationStart) => {
        if (event.navigationTrigger === 'popstate') {
          // Perform actions
        }
      });
}

https://stackoverflow.com/questions/39132737/angular-2-how-to-detect-back-button-press-using-router-and-location-go

Browser has limited JSON response size

 As of 10/29/20, CHROME returns null for JSON response size at or over 543MB.(Tested by creating a localhost server and send random JSON data)

For FireFox it is able to return JSON response size at 543MB.

Same issue/test an be found in the older article :

https://stackoverflow.com/questions/10722720/large-json-could-not-be-handled-by-browser

https://support.google.com/chrome/a/thread/28233217?hl=en

session storage on browser

Guess its too late to answer but for anyone else, the session storage that is shown in chrome dev tools is HTML5 sessionStorage and not the server side Session.

With web storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

• According to this, sessionStorage is limited only by available system memory in Chrome. However, see my answer update. – Robert Harvey Apr 5 '13 at 18:35 
• 
  
• 
  
• 
  
• https://stackoverflow.com/questions/20170381/what-is-session-storage-in-chrome-developer-tools
• 
  
• https://stackoverflow.com/questions/15840976/how-large-is-html5-session-storage
• 
  
• http://www.gwtproject.org/doc/latest/DevGuideHtml5Storage.html
• 
  
• 
  
• 
  
• 
  
• 
  
• size:
• 
  
• 
  
• 
  

• var data = 0;
  for(var v in window.sessionStorage){
   data += window.sessionStorage.getItem(v); 
  }
  
  console.log(data);//.length to get char length

• https://stackoverflow.com/questions/11613604/how-to-get-total-html5-storage-size-used-by-current-application

• 
  
• 
  
• 
  
• 
  

 

Find chrome max memory per tab

 We recently faced same problem.

You can use web performance API for to check current total memory allocation.
window.performance

It allows web pages to access to certain functions for measuring the performance of web page. There is a non-standard extension available only for chrome to record memory information.

window.performance.memory

It will return you following information.

• usedJsHeapSize : total amount of memory being used by JS objects including V8 internal objects,
• totalJsHeapSize : current size of the JS heap including free space not occupied by any JS objects

Also there is a js library available for recording memory stats. (https://github.com/spite/memory-stats.js)

Please checkout this as well. It might help you. - https://developer.chrome.com/devtools/docs/javascript-memory-profiling

https://stackoverflow.com/questions/36382135/how-to-find-memory-used-by-a-chrome-tab-using-javascript