URLs can include a query string (the part after ?).

Like this:

https://test.com/?name=roger
https://test.com/hello?name=roger

In this case we have a single query parameter, named name, with the value roger.

You can have multiple parameters, like this:

https://test.com/hello?name=roger&age=20

The parameters passed as a query string are normally used server-side, to generate a proper response. Here’s how you can access query parameters using Node.js.

To access the value of the query inside the browser, using JavaScript, we have a special API called URLSearchParams, supported by all modern browsers.

Here is how we can use it:

const params = new URLSearchParams(window.location.search)

Note: don’t pass the full URL as a parameter to URLSearchParams(), but only the query string part of the URL, which you access using window.location.search.

In the case of:

https://test.com/hello?name=roger

window.location.search is equal to the string ?name=roger.

Now that you have the params object, you can query it.

You can check if a parameter was passed:

params.has('test')

You can get the value of a parameter:

params.get('test')

You can iterate over all the parameters, using for..of:

const params = new URLSearchParams(window.location.search)
for (const param of params) {
  console.log(param)
}

A parameter can have more than one value.

In this case, we pass the same parameter name multiple times, like this:

https://test.com/hello?name=roger&name=flavio

We have no way to detect if a parameter is passed more than once. If we use params.get('name'), we’ll only get the first value back.

We can use params.getAll('name') to get an array with all the values.

In addition to has(), get() and getAll(), the URLSearchParams API offers several other methods that we can use to loop through the parameters:

• forEach() iterates over the parameters
• entries() returns an iterator of key-value pairs
• keys() returns an iterator of parameter keys
• values() returns an iterator of parameter values

Other methods to alter the parameters, for use in other JavaScript running in the page (they do not change the URL):

• append() to append a new parameter to the object
• delete() to delete an existing parameter
• set() to set the value of a parameter

We also have sort() to sort parameters by key, and we have the toString() method to generate a query string from the values.

We can use append() / set() / delete() to edit the query string, and generate a new one with toString().

Lessons in this unit:

0:	Introduction
1:	The URL object
2:	▶︎ URLSearchParams
3:	Get the URL fragment
4:	Set the URL fragment
5:	The Navigator object