AI Workshop: learn to build apps with AI →
URL API: The URL object

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


The URL namespace provides 2 static methods for creating and revoking Blob URLs:

  • URL.createObjectURL()
  • URL.revokeObjectURL()

Given a blob, you generate a URL to it using the URL.createObjectURL() function:

const myURL = URL.createObjectURL(aBlob)

Once you have the blob URL, you can destroy it from memory using:

URL.revokeObjectURL(myURL)

In addition to this, URL offers a very different functionality through its constructor, which can be used to create a URL. You can call it like this:

const currentUrl = new URL(window.location.href)

Now currentUrl has a set of properties you can use to inspect the URL:

  • hash, the hash fragment
  • host, the domain and port
  • hostname, the domain
  • href, the full URL
  • origin, scheme, domain, and port
  • password
  • pathname
  • port
  • protocol
  • search
  • searchParams
  • username

These are the usual parts of a URL.

You can alter any of these except origin and searchParams, which are read-only. and generate a new URL string by calling the toString() method, or by referencing the href property.

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