Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Storage & BOM

JavaScript location Object

Written by Published

location describes the current URL and can be used to navigate to another page.

Every part of the address is available as its own property.

Assigning to it sends the browser somewhere else.

Example

Example

javascript

console.log(typeof location.href);
console.log(typeof location.hostname);

Both are string.

Reading the URL

href is the whole address.

pathname is the part after the domain.

search is the query string, starting with a question mark.

Syntax

Syntax

javascript

location.href;
location.pathname;
location.search;

All of these are read-only in the sense that they reflect the current page.

Breaking Down a URL

Parsing a URL string with new URL gives the same properties.

Example

Example

javascript

const url = new URL("https://example.com/products?id=42#top");

console.log(url.hostname);
console.log(url.pathname);
console.log(url.search);
console.log(url.hash);

This is safer than splitting the string yourself.

Reading a Query Parameter

URLSearchParams parses the query string properly.

Example

Example

javascript

const url = new URL("https://example.com/search?q=javascript&page=2");
const params = new URLSearchParams(url.search);

console.log(params.get("q"));
console.log(params.get("page"));
console.log(params.get("missing"));

A missing parameter gives null, not an error.

Building a Query String

The same object can build a query string from scratch.

Example

Example

javascript

const params = new URLSearchParams();
params.set("q", "javascript");
params.set("page", "2");

console.log(params.toString());

Values are escaped automatically, which avoids a whole class of bugs.

Navigating with location

Assigning to location.href sends the browser to a new page.

location.assign does the same thing explicitly.

Example

Example

javascript

function targetFor(id) {
  return "/products/" + id;
}

console.log(targetFor(42));

Setting location.href = targetFor(42) would navigate there.

Reloading the Page

location.reload() reloads the current page.

Example

Example

javascript

console.log(typeof location.reload);

A boolean argument used to force a server reload; it is no longer needed.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript location Object</title>
</head>
<body>

  <h1>The location Object</h1>

  <p id="out"></p>

  <script>
    const url = new URL("https://example.com/products?id=42&sort=price");
    const params = new URLSearchParams(url.search);

    document.getElementById("out").innerHTML =
      "Host: " + url.hostname +
      "<br>Path: " + url.pathname +
      "<br>Product id: " + params.get("id") +
      "<br>Sort by: " + params.get("sort");
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try a missing parameter:

Read params.get("colour") and see the null.

Important Points

  • location.href is the whole current address.
  • pathname, search and hash give the parts.
  • new URL parses any address string.
  • URLSearchParams reads and builds query strings.
  • Assigning to location.href navigates the page.

Conclusion

The location object gives structured access to the address bar.

URLSearchParams removes the need to parse query strings by hand.

Navigating and reading the URL are two sides of the same object.

PreviousJavaScript window ObjectNextJavaScript history Object