useLocalStorage

El hook useLocalStorage permite interactuar con el almacenamiento local del navegador, ofreciendo funcionalidades como cargar, actualizar y eliminar valores de manera reactiva.

Importación

Para importar el componente useLocalStorage, se puede hacer desde fenextjs

import { useLocalStorage } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Descripcion
name	string	sí	Nombre clave utilizada para identificar el valor en el almacenamiento local.
defaultValue	T	no	Valor predeterminado que se utiliza si no se encuentra un valor en el almacenamiento local.
parse	(value: any) => T	no	Función para convertir el valor almacenado en un formato específico.
updateValue	(oldValue: O, newValue: T) => T	no	Función que define cómo actualizar el valor almacenado con base en el valor anterior.

Returns

Parametro	Tipo	Descripcion
load	boolean	Indica si useLocalStorage finalizo su carga.
value	T \| undefined	El valor actualmente almacenado en el almacenamiento local.
setLocalStorage	(newValue: T) => void	Función para actualizar el valor en el almacenamiento local.
onClearLocalStorage	() => void	Función para eliminar el valor asociado del almacenamiento local.

Usos

Cargar un valor inicial

const { value, load } = useLocalStorage({
  name: "example_key",
  defaultValue: "Default",
});

Actualizar un valor

const { setLocalStorage } = useLocalStorage({ name: "example_key" });
setLocalStorage("Nuevo valor");

Eliminar un valor

const { onClearLocalStorage } = useLocalStorage({ name: "example_key" });
onClearLocalStorage();

Usar una función personalizada para parsear valores

const { value } = useLocalStorage<number>({
  name: "number_key",
  defaultValue: 0,
  parse: (v) => parseInt(v, 10),
});

useValidator useSessionStorage