URL Search Params Filter - JavaScript Client

URLSearchParams reads a query string filter and updates both the rendered list and the URL state.

Program

Query parameters make client-side state shareable. A filter encoded in the URL can be bookmarked, copied, and restored.

url_search_params_filter.html

Visuals: captured from real browser rendering

<ul id="tasks"></ul>
<script>
  const allTasks = [{ title: "Build", status: "open" }, { title: "Review", status: "open" }];
  const params = new URLSearchParams(location.search);
  const status = params.get("status") || "open";
  const visible = allTasks.filter(task => task.status === status);
  history.replaceState(null, "", "?status=" + status);
  tasks.innerHTML = visible.map(task => "<li>" + task.title + "</li>").join("");
</script>

Parse the current query string.
The query string becomes an object with get and set helpers.
Read the status filter.
The page chooses open tasks when the URL does not specify another state.
Filter tasks by URL state.
Only tasks matching the URL filter remain visible.
Normalize the visible URL.
replaceState updates the address bar without a reload.

URLSearchParams URLSearchParams reads and writes key/value pairs from a query string.

history.replaceState replaceState changes the current history entry without navigating.