How to implement temporary storage of the infiniteHitsCache cache?

[lpkobamn]

The search engine stores critical data, such as the customer's price and the quantity in stock. As far as I understand, the cache is stored in session storage and is updated only when the browser is restarted. Is it possible to specify the lifetime of the cache?

At the same time, I cannot completely abandon this caching as it is used to scroll to the item position when changing the page and go back.

I will be grateful for a hint

[Haroenv]

There's no builtin TTL in the session storage cache, but you can use https://github.com/algolia/instantsearch/blob/master/packages/instantsearch.js/src/lib/infiniteHitsCache/sessionStorage.ts as a base to make your own cache that removes values at a condition you decide

[lpkobamn]

Example implementation.

import { isEqual, safelyRunOnBrowser } from "instantsearch.js/es/lib/utils";

import type { InfiniteHitsCache } from "instantsearch.js/es/connectors/infinite-hits/connectInfiniteHits";
import type { PlainSearchParameters } from "algoliasearch-helper";

function getStateWithoutPage(state: PlainSearchParameters) {
  const { page, ...rest } = state || {};
  return rest;
}

export default function createInfiniteHitsSessionStorageCache({
  key,
  ttl = 300000, // default TTL in milliseconds (5 minutes)
}: {
  /**
   * If you display multiple instances of infiniteHits on the same page,
   * you must provide a unique key for each instance.
   */
  key?: string;
  /**
   * Time to live for the cache in milliseconds.
   */
  ttl?: number;
} = {}): InfiniteHitsCache {
  const KEY = ["ais.infiniteHits", key].filter(Boolean).join(":");

  return {
    read({ state }) {
      const sessionStorage = safelyRunOnBrowser<Storage | undefined>(
        ({ window }) => window.sessionStorage
      );

      if (!sessionStorage) {
        return null;
      }

      try {
        const cacheString = sessionStorage.getItem(KEY);
        if (!cacheString) {
          return null;
        }

        const cache = JSON.parse(cacheString);
        const now = Date.now();

        // Check if the cache has expired
        if (cache.timestamp + ttl < now) {
          sessionStorage.removeItem(KEY);
          return null;
        }

        return cache && isEqual(cache.state, getStateWithoutPage(state))
          ? cache.hits
          : null;
      } catch (error) {
        if (error instanceof SyntaxError) {
          try {
            sessionStorage.removeItem(KEY);
          } catch (err) {
            // do nothing
          }
        }
        return null;
      }
    },
    write({ state, hits }) {
      const sessionStorage = safelyRunOnBrowser<Storage | undefined>(
        ({ window }) => window.sessionStorage
      );

      if (!sessionStorage) {
        return;
      }

      try {
        sessionStorage.setItem(
          KEY,
          JSON.stringify({
            state: getStateWithoutPage(state),
            hits,
            timestamp: Date.now(), // Add a timestamp to the cache
          })
        );
      } catch (error) {
        // do nothing
      }
    },
  };
}