Persisting Search Params with LocalStorage

[leonardolombardi07]

Hey everyone,

I wanted to share a snippet of code I built to persist search parameters using localStorage. I know it's kind of an easy task and a bit outside the scope of nuqs, but I thought it might be useful for others who want to maintain state across page navigation.

The Setup

I'm using nuqs for query state management and usehooks-ts for localStorage. Here’s how I’ve combined them:

"use client";

import { DEPARTMENTS } from "@/modules/api";
import { useLocalStorage } from 'usehooks-ts'
import {
  useQueryState,
  parseAsString,
  parseAsStringLiteral,
  parseAsArrayOf,
  Options,
} from "nuqs";

const DEFAULT_OPTIONS: Options = {
  history: "push",
};

const SEARCH_PARAMS_KEY = {
  search: "search",
  department: "department",
  courseIds: "courseIds",
  sortBy: "sortBy",
} as const;

type SearchParams = {
  [K in keyof typeof SEARCH_PARAMS_KEY]: string;
};

type SortBy = "relevance" | "ratingAverage" | "ratingCount";

const SORT_BY_ITEMS: SortBy[] = [
  "relevance",
  "ratingAverage",
  "ratingCount",
] as const;

function usePageSearchParams() {
  const [searchQuery, setSearchQuery] = useQueryState(
    SEARCH_PARAMS_KEY.search,
    parseAsString.withOptions(DEFAULT_OPTIONS)
  );

  const [departments = [], setDepartments] = useQueryState(
    SEARCH_PARAMS_KEY.department,
    parseAsArrayOf(parseAsStringLiteral(DEPARTMENTS)).withOptions(
      DEFAULT_OPTIONS
    )
  );

  const [courseIds, setCourseIds] = useQueryState(
    SEARCH_PARAMS_KEY.courseIds,
    parseAsArrayOf(parseAsString).withOptions(DEFAULT_OPTIONS)
  );

  const [sortBy, setSortBy] = useQueryState(
    SEARCH_PARAMS_KEY.sortBy,
    parseAsStringLiteral(SORT_BY_ITEMS).withOptions(DEFAULT_OPTIONS)
  );

  const [localStorageState, setLocalStorageState] = useLocalStorage(
    "@homeSearchParams",
    { searchQuery, departments, courseIds, sortBy }
  );

  function setWithLocalStorage<T>(
    setValue: ReturnType<typeof useQueryState<T>>[1],
    key: keyof typeof localStorageState
  ) {
    return function (val: T & {}) {
      setValue(val);
      setLocalStorageState((prev) => ({
        ...prev,
        [key]: val,
      }));
    };
  }

  return {
    searchQuery: localStorageState.searchQuery,
    setSearchQuery: setWithLocalStorage(setSearchQuery, "searchQuery"),
    departments: localStorageState.departments,
    setDepartments: setWithLocalStorage(setDepartments, "departments"),
    courseIds: localStorageState.courseIds,
    setCourseIds: setWithLocalStorage(setCourseIds, "courseIds"),
    sortBy: localStorageState.sortBy,
    setSortBy: setWithLocalStorage(setSortBy, "sortBy"),
  };
}

[franky47]

Thanks for sharing!

Doesn't the localStorage double up with the URL to "persist state across page reloads" ?

To make sure search params are persisted when clicking a <Link>, have you looked into the serializer helper?

You could combine it with useQueryStates to build a reactive href for your links, here's an example:

import Link from 'next/link'
import {
  createSerializer,
  parseAsBoolean,
  parseAsString,
  useQueryStates
} from 'nuqs'

type Page = 'a' | 'b'

type ClientProps = {
  page: Page
  target: Page
}

const searchParams = {
  q: parseAsString.withDefault(''),
  checked: parseAsBoolean.withDefault(false)
}
const serialize = createSerializer(searchParams)

export function Client({ page, target }: ClientProps) {
  const [{ q, checked }, setParams] = useQueryStates(searchParams)
  const href = serialize(`/app/persist-across-navigation/${target}`, {
    q,
    checked
  })
  return (
    <>
      <h1>Page {page}</h1>
      <input
        type="text"
        value={q}
        onChange={e => setParams({ q: e.target.value })}
      />
      <input
        type="checkbox"
        checked={checked}
        onChange={e => setParams({ checked: e.target.checked })}
      />
      <Link href={href}>Go to page {target}</Link>
    </>
  )
}