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

<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>

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

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