# How to update the URL of a page without causing a reload using vanilla JavaScript (archive) — David Larlet
Publication mise en cache pour en conserver une trace.

# How to update the URL of a page without causing a reload using vanilla JavaScript

Yesterday, we looked at how to build a vanilla JavaScript search feature for a static website. At the end, I mentioned…

> Tomorrow, I’ll show you how I update the URL with the search query, and run a search automatically on page load if there’s a query in the URL.

Well, today is tomorrow, so let’s dig in!

Note: If you haven’t yet, you should probably read yesterday’s post first, or today’s won’t make much sense.

## Updating the URL

In our `search()` function, we create an array of regex patterns, get an array of matching items (sorted by how many matches they have), and then render them into the UI.

Let’s create another function, `updateURL()`, to update the URL for us. We’ll pass in the search `query` as an argument.

    /**
     * Search for matches
     * @param  {String} query The term to search for
     */
    function search (query) {

        // ...

        // Display the results
     showResults(results);

        // Update the URL
     updateURL(query);

    }

We’re going to use the `history.pushState()` method to update our URL.

This creates a new entry in the browser’s history (and updates the URL) without causing the page to reload. It accepts three arguments: the browser `state`, a `title` to use in the `document`, and the `url`.

We’ll use the current `history.state`, no need to replace anything. We’ll also use the current `document.title`.

For the `url`, we’ll combine the `location.origin` and `location.pathname`, then append the `?s` query string parameter, and use the `query` for its value. We’ll pass the `query` into the `encodeURI()` method to encode it.

    /**
     * Update the URL with a query string for the search string
     * @param  {String} query The search query
     */
    function updateURL (query) {

        // Create the properties
     let state = history.state;
        let title = document.title;
        let url = window.location.origin + window.location.pathname + '?s=' + encodeURI(query);

    }

Finally, we can pass all three into the `history.pushState()` method to update the URL.

    /**
     * Update the URL with a query string for the search string
     * @param  {String} query The search query
     */
    function updateURL (query) {

        // Create the properties
     // ...

        // Update the URL
     history.pushState(state, title, url);

    }

## Running a search on page load

If the URL has an `s` query string parameter when the page loads, we should also run a search immediately. This lets users bookmark search pages for later.

First, we’ll create an `onload()` function to run immediately with the script.

    // Create a submit handler
    form.addEventListener('submit', submitHandler);

    // Check for query strings onload
    onload();

We’ll use the `new URLSearchParams()` constructor to create a `URLSearchParams` object from the `location.search` property.

Then, we’ll use the `URLSearchParams.get()` method to look for a query string parameter with a key of `s`.

If one is not found, we’ll use the `return` operator to end our function.

    /**
     * If there's a query string search term, search it on page load
     */
    function onload () {
        let query = new URLSearchParams(window.location.search).get('s');
        if (!query) return;
    }

If a `query` exists, we’ll update the `input.value` property with it so that the search field contains the search `query`. Then, we’ll pass the `query` into the `search()` function to run a search.

The `URLSearchParams.get()` method automatically decodes the parameter for us, so we don’t need to worry about that.

    /**
     * If there's a query string search term, search it on page load
     */
    function onload () {
        let query = new URLSearchParams(window.location.search).get('s');
        if (!query) return;
        input.value = query;
        search(query);
    }

Now, when someone reloads or revists a search page, a new search will automatically run.