Location, location, location!

Before we can learn about alternatives to reloading pages, let's take a look at how the browser manages reloads.

You've probably encountered the window object. It's a global catch-all object for browser-based functionality and state. It's also the default this scope in any HTML page:

We've even accessed window earlier. When we rendered to document.body or used document.querySelector, these properties and methods were called on the window object. It's the same as calling window.document.querySelector.

Most of the time, document is the only property we need. That doesn't mean it's the only property useful to us. Try the following in the console:

console.log(window.location);

You should see something similar to the following:

Location {
    hash: ""
    host: "127.0.0.1:3000"
    hostname: "127.0.0.1"
    href: "http://127.0.0.1:3000/examples/login.html"
    origin: "http://127.0.0.1:3000"
    pathname: "/examples/login.html"
    port: "3000"
    ...
}

If we were trying...