QueryStrings

The String

Browsers have a location object inside window which gives us access to all the parts of what is written inside the location bar.

The location.href is the full string, location.pathname is the folder and filenames, and location.search is the querystring. The querystring includes the ? at the start. However, if there is nothing except the ? then the value of location.search will be an empty string.

The format of the string is a collection of name=value pairs. Between each pair will be an ampersand &.

Since the start of the web developers had to treat it as a string and split it apart on the & and then split each of those parts on the =. The video below explains how to do this.

A few years ago, there were URL and a URLSearchParams objects that we can use to manage and access the parts of the querystring. The code from this video is what you could use to create the polyfill for URLSearchParams.

REMEMBER that we need to be backward compatible. Check if URL exists in window before using the URLSearchParams.

Encoding URL values

MDN reference for encodeURIComponent

URL Object and URLSearchParams

This video explains how you can use the newer URLSearchParams object to manage your querystrings.