Window.location Cheat Sheet

JavaScript, Browser · Dec 21, 2022

The window.location object is particularly useful when working with a page's URL information. Let's take a look at an example of a URL and what each property of the window.location object represents.

const url = 'https://dev.30secondsofcode.org:8000/c/js?page=2&sort=asc#search';

Provide the above URL, here's a quick reference for the properties window.location object:

window.location.protocol

  • The protocol schema of the URL (usually http: or https:)
  • Sample value: https:

window.location.hostname

  • The domain name of the URL
  • Sample value: dev.30secondsofcode.org

window.location.port

  • The port number of the URL
  • Sample value: 8000

window.location.host

  • The domain name and port number of the URL
  • Sample value: dev.30secondsofcode.org:8000

window.location.origin

  • The protocol schema, domain name and port number of the URL
  • Sample value: https://dev.30secondsofcode.org:8000

window.location.pathname

  • The path of the URL, including the leading slash
  • Sample value: /c/js

window.location.search

  • The query string of the URL, including the leading question mark
  • Sample value: ?page=2&sort=asc

window.location.hash

  • The fragment identifier of the URL, including the leading hash
  • Sample value: #search

window.location.href

  • The full URL, including the protocol schema, domain name, port number, path, query string and fragment identifier
  • Sample value: https://dev.30secondsofcode.org:8000/c/js?page=2&sort=asc#search

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Cheatsheets

    Snippet collection

    A collection of cheatsheets to bookmark and come back to whenever you need to look up anything.

  • URL parameters as object

    JavaScript, Browser

    Creates an object containing the parameters of the current URL.

  • Parse cookie

    JavaScript, Browser

    Parses an HTTP Cookie header string, returning an object of all cookie name-value pairs.

  • Form to object

    JavaScript, Browser

    Encodes a set of form elements as an object.