JS Location

The location object holds the address of the current page and can send the browser somewhere else. An address is made of named parts, and the same parts show up when you work with any URL in code. This lesson names the parts, reads values out of the query string, builds addresses safely, and covers the ways to navigate.

// The Parts of an Address

Take this address:

https://www.example.com:8080/lessons/page.html?topic=json&level=2#intro

location breaks the current page's address into properties. The built-in URL object has exactly the same properties for any address you give it, which makes it a handy way to practice:

const url = new URL("https://www.example.com:8080/lessons/page.html?topic=json&level=2#intro");

console.log(url.href);
console.log(url.protocol);
console.log(url.host);
console.log(url.hostname);
console.log(url.port);
console.log(url.origin);
console.log(url.pathname);
console.log(url.search);
console.log(url.hash);

For your current page, location.pathname is where you are on the site, and location.origin is the site itself.

// Reading the Query String

The query string carries small pieces of information in the address, as name=value pairs joined by &. Do not split it by hand: URLSearchParams reads it correctly, including special characters.

const params = new URLSearchParams("?topic=json&level=2&tag=a&tag=b");

console.log(params.get("topic"));
console.log(params.get("level"), typeof params.get("level"));
console.log(params.get("missing"));
console.log(params.has("level"));
console.log(params.getAll("tag"));

On a real page you pass it the current query string: new URLSearchParams(location.search). The values arrive as strings, so convert with Number(...) when you need a number.

const params = new URLSearchParams("topic=json&level=2");
for (const [key, value] of params) {
  console.log(key + " = " + value);
}

// Building Addresses Safely

If you glue a query string together with +, a space or an & in the value breaks the address. Let URLSearchParams encode it for you:

const params = new URLSearchParams();
params.set("q", "cats & dogs");
params.set("page", 2);

console.log(params.toString());
console.log("https://example.com/search?" + params);

// Going Somewhere Else

Assigning to location.href sends the browser to a new address. There are four related ways to move:

// send the visitor to the home page
location.href = "/";

// like a redirect: the old page is not left in the Back list
location.replace("/login.html");

These are not shown with a Try It button because they would leave the page. Use them on a page of your own.

// The Hash

Changing only location.hash does not reload the page. It scrolls to the element with that id and adds a history entry, which is how in-page links work. The "hashchange" event tells you when it changes:

location.hash = "#intro";   // scroll to the element with id="intro"

window.addEventListener("hashchange", function () {
  console.log("now at", location.hash);
});

// Quick Check

const p = new URLSearchParams("n=5");
console.log(typeof p.get("n"));

// Try It

▶ Open Playground

1. Click Open Playground and run it. Change the address and run it again to see which parts change
2. Add a port to the address and a second tag value to the query, then read them
3. Build a search address for the text rock & roll with URLSearchParams
4. Write the line that sends a visitor to /home.html without leaving the current page in the Back list