> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# createLocalStorageRecentSearchesPlugin

> This plugin connects with the user's local storage to fetch and save recent searches.

<Tip>
  Autocomplete is also available as an experimental widget in InstantSearch,
  making it easier to integrate into your search experience.
  For more information,
  see the API reference for [InstantSearch.js](/doc/api-reference/widgets/autocomplete/js) or
  [React InstantSearch](/doc/api-reference/widgets/autocomplete/react).
</Tip>

The `createLocalStorageRecentSearchesPlugin` plugin connects with the user's [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
to fetch and save recent searches.
To use your own storage,
check [`createRecentSearchesPlugin`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-recent-searches/createRecentSearchesPlugin).

[See demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/query-suggestions-with-recent-searches)

## Installation

First, you need to install the plugin.

<CodeGroup>
  ```sh npm theme={"system"}
  npm install @algolia/autocomplete-plugin-recent-searches
  ```

  ```sh yarn theme={"system"}
  yarn add @algolia/autocomplete-plugin-recent-searches
  ```
</CodeGroup>

Then import it in your project:

```js JavaScript icon=code theme={"system"}
import { createLocalStorageRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";
```

If you don't use a package manager, you can use the HTML `script` element:

```html HTML icon=code-xml theme={"system"}
<script
  src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-plugin-recent-searches@1.19.9/dist/umd/index.production.js"
  integrity="sha256-jKoLPMdNVipXJ5otUs3DwuZeaX1kytBq2HleXEo4G7E="
  crossorigin="anonymous"
></script>
<script>
  const { createRecentSearchesPlugin } =
    window["@algolia/autocomplete-plugin-recent-searches"];
</script>
```

## Example

This example uses the plugin within [`autocomplete-js`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-js).

```js JavaScript icon=code theme={"system"}
import { autocomplete } from "@algolia/autocomplete-js";
import { createLocalStorageRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";

const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
  key: "navbar",
});

autocomplete({
  container: "#autocomplete",
  openOnFocus: true,
  plugins: [recentSearchesPlugin],
});
```

You can combine this plugin with the [Query Suggestions](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions)
plugin to populate the empty screen with recent and popular queries.

```js JavaScript icon=code theme={"system"}
import { liteClient as algoliasearch } from "algoliasearch/lite";
import { autocomplete } from "@algolia/autocomplete-js";
import { createLocalStorageRecentSearchesPlugin } from "@algolia/autocomplete-plugin-recent-searches";
import { createQuerySuggestionsPlugin } from "@algolia/autocomplete-plugin-query-suggestions";

const searchClient = algoliasearch(
  "latency",
  "6be0576ff61c053d5f9a3225e2a90f76",
);
const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
  key: "navbar",
});
const querySuggestionsPlugin = createQuerySuggestionsPlugin({
  searchClient,
  indexName: "instant_search_demo_query_suggestions",
  getSearchParams() {
    return recentSearches.data.getAlgoliaSearchParams();
  },
});

autocomplete({
  container: "#autocomplete",
  openOnFocus: true,
  plugins: [recentSearchesPlugin, querySuggestionsPlugin],
});
```

## Parameters

<ParamField body="key" type="string" required>
  A local storage key to identify where to save and retrieve the recent searches.

  For example:

  * `"navbar"`
  * `"search"`
  * `"main"`

  The plugin namespaces all keys to avoid collisions.
</ParamField>

<ParamField body="limit" type="number">
  The number of recent searches to display.
</ParamField>

<ParamField body="search" type="(params: { query: string; items: TItem[]; limit: number; }) => TItem[]">
  A search function to retrieve recent searches from.
  This function is called in [`storage.getAll`](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-recent-searches/createRecentSearchesPlugin#param-storage)
  to retrieve recent searches and is useful to filter and highlight recent searches when typing a query.

  ```js JavaScript icon=code theme={"system"}
  function highlight({ item, query }) {
    return {
      ...item,
      _highlightResult: {
        query: {
          value: query
            ? item.query.replace(
                new RegExp(query, "g"),
                `<span class='underline'>aa-highlight</span>${query}<span class='underline'>/aa-highlight</span>`,
              )
            : item.query,
        },
      },
    };
  }

  function search({ query, items, limit }) {
    if (!query) {
      return items.slice(0, limit).map((item) => highlight({ item, query }));
    }

    return items
      .filter((item) => item.query.toLowerCase().includes(query.toLowerCase()))
      .slice(0, limit)
      .map((item) => highlight({ item, query }));
  }
  ```
</ParamField>

<ParamField body="transformSource" type="function">
  ```ts Type definition theme={"system"}
  (params: {
    source: AutocompleteSource,
    state: AutocompleteState,
    onRemove: () => void,
    onTapAhead: () => void,
  })
  ```

  This function takes the original [source](/doc/ui-libraries/autocomplete/core-concepts/sources)
  as a parameter and returns a modified version of that source.

  For example:

  **Change Autocomplete state**

  Usually, when a link in the Autocomplete menu is selected, the menu closes.
  However, to keep the menu visible after a selection is made,
  use `transformSource` to set the `isOpen` [state](/doc/ui-libraries/autocomplete/core-concepts/state):

  ```js JavaScript icon=code theme={"system"}
  const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
    key: "navbar",
    transformSource({ source, onRemove }) {
      return {
        ...source,
        onSelect({ setIsOpen }) {
          setIsOpen(true);
        },
      };
    },
  });
  ```

  **Create links**

  Turns Query Suggestions into clickable Google search links:

  <CodeGroup>
    ```js JavaScript icon=code theme={"system"}
    const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
      key: "navbar",
      transformSource({ source, onRemove }) {
        return {
          ...source,
          getItemUrl({ item }) {
            return `https://google.com?q=${item.query}`;
          },
          templates: {
            ...source.templates,
            item(params) {
              const { item, html } = params;

              return html`<a
                class="aa-ItemLink"
                href="https://google.com?q=${item.query}"
              >
                ${source.templates.item(params).props.children}
              </a>`;
            },
          },
        };
      },
    });
    ```

    ```jsx JSX icon=code theme={"system"}
    const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
      key: "navbar",
      transformSource({ source, onRemove }) {
        return {
          ...source,
          getItemUrl({ item }) {
            return `https://google.com?q=${item.query}`;
          },
          templates: {
            ...source.templates,
            item(params) {
              const { item } = params;

              return (
                <a
                  classbody="aa-ItemLink"
                  href={`https://google.com?q=${item.query}`}
                >
                  {source.templates.item(params).props.children}
                </a>
              );
            },
          },
        };
      },
    });
    ```
  </CodeGroup>
</ParamField>

<ParamField body="translations" type="AutocompleteRecentSearchesPluginTranslations">
  ```ts Type definition theme={"system"}
  type AutocompleteRecentSearchesPluginTranslations = {
    removeSearchTitle: string; // defaults to 'Remove this search'
    fillQueryTitle: (text: string) => string; // defaults to 'Fill query with "${text}"'
  };
  ```

  A dictionary of translations to support internationalization.
</ParamField>

## Returns

### `data`

<ParamField body="getAlgoliaSearchParams" type="SearchParameters => SearchParameters">
  Optimized [Algolia search parameters](/doc/api-reference/search-api-parameters).
  This is useful when using the plugin along with the [Query Suggestions](/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions/createQuerySuggestionsPlugin) plugin.

  This function enhances the provided search parameters by:

  * Excluding Query Suggestions that are already displayed in recent searches.
  * Using a shared hitsPerPage value to get a group limit of Query Suggestions and recent searches.
</ParamField>

<ParamField body="addItem" type="(item: TItem) => void">
  A function that adds an item to the recent searches local storage.
</ParamField>

<ParamField body="removeItem" type="(id: string) => void">
  A function that removes an item from the recent searches local storage.
</ParamField>

<ParamField body="getAll" type="() => TItem[]">
  A function that returns the items from the recent searches local storage.
</ParamField>