How to Check if the page is reloaded or refreshed in JavaScript

Sometimes, We want to check if the page is reloaded or refreshed in JavaScript.

A page can be refreshed or reloaded by doing the following things.

• keypress F5 from the user
• page reload using location.reload()
• back or forward button from a browser
• Typing URL in a browser
• or clicking a link to reload a specific page
• Submit form
• Prerender a page

#Check if the page is reloaded or refreshed in javascript

Javascript provides a window.performance.navigation object that provides the type of reload and page load times which is supported in all the latest browsers.

window.performance.navigation returns an object of PerformanceNavigation It contains {type: 1, redirectCount: 0} fields

type indicates the type of reload, and contains values either 0,1,2,3.

• 0: TYPE_NAVIGATE (Basic navigation):
  • Navigating from one page to another using buttons or links,
  • Typing a URL, or submitting a form.
  • Loaded the first time
• 1 :TYPE_RELOAD(reload or refresh):
  • Page reloaded or refreshed by the browser
  • location.reload() is used
• 2: TYPE_BACK_FORWARD:
  • User navigated back and forward history buttons
• 255:TYPE_RESERVED: reserved type for prerender types

`redirectCount“ indicates the number of times the page is redirected to another page. It is the count of times since non-redirected navigation

console.log(window.performance.navigation); //PerformanceNavigation {type: 1, redirectCount: 0}

Output:

PerformanceNavigation {type: 1, redirectCount: 0}

getEntriesByType method API to get metrics about the performance of the request, returns an array of PerformanceEntry objects. Takes type as a parameter, in this case provide navigation

console.log(window.performance.getEntriesByType("navigation"));

Output is

[PerformanceNavigationTiming]0: PerformanceNavigationTimingconnectEnd: 0.5connectStart: 0.5decodedBodySize: 0domComplete: 2165.699999988079domContentLoadedEventEnd: 2165.5domContentLoadedEventStart: 2165.5domInteractive: 2165.5domainLookupEnd: 0.5domainLookupStart: 0.5duration: 2165.699999988079encodedBodySize: 0entryType: "navigation"fetchStart: 0.5initiatorType: "navigation"loadEventEnd: 2165.699999988079loadEventStart: 2165.699999988079name: ""nextHopProtocol: ""redirectCount: 0redirectEnd: 0redirectStart: 0requestStart: 0.5responseEnd: 3.100000023841858responseStart: 0.5secureConnectionStart: 0serverTiming: []startTime: 0transferSize: 300type: "reload"unloadEventEnd: 0unloadEventStart: 0workerStart: 0[[Prototype]]: PerformanceNavigationTiminglength: 1[[Prototype]]: Array(0)

From the above output, we can see that the reload type is 1.

let data = window.performance.getEntriesByType("navigation")[0].type;
console.log(data);

output:

reload;

Another way, you use sessionStorage or cookie to store the current timestamp After reloading, Compare the previous timestamp with a current stamp to know that the page is reloaded.

This gives the page is reloaded or not, but you can’t know which type causes the page to reload.