# Get query string values with URLSearchParams

> Learn how to read and modify query string values in the browser with the URLSearchParams API, using window.location.search and methods like get and has.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-03-14 | Topics: [Web Platform](https://flaviocopes.com/tags/platform/) | Canonical: https://flaviocopes.com/urlsearchparams/

The [HTTP protocol](https://flaviocopes.com/http) allows the request to a web page to be made with a query string.

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](https://flaviocopes.com/express-get-query-variables/).

To access the value of the query inside the browser, using [JavaScript](https://flaviocopes.com/javascript/), we have a special API called **URLSearchParam**, supported by all modern browsers

Here is how we can use it:

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

(if you want to see how a query string breaks down into parameters, I built a free [URL parser tool](https://flaviocopes.com/tools/url-parser/) that labels every part of a URL)

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:

```js
params.has('test')
```

You can get the value of a parameter:

```js
params.get('test')
```

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

```js
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 parameters is passed more than once. If we use `params.get('name')`, we'll only get the first value back.

We can sue `params.getAll('name')` to get back an array with all the values passed.

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 paramters
- `entries()` returns an iterator containing the parameters key/values
- `keys()` returns an iterator containing the parameters keys
- `values()` returns an iterator containing the parameters 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 value, 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()`.