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
    • 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}


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


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;



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.