useSessionStorage

El hook useSessionStorage permite interactuar con el almacenamiento de sesión del navegador, ofreciendo funcionalidades como cargar, actualizar y eliminar valores de manera reactiva.

Importación

Para importar el componente useSessionStorage, se puede hacer desde fenextjs

import { useSessionStorage } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Descripcion
name	string	sí	Nombre clave utilizada para identificar el valor en el almacenamiento de sesión.
defaultValue	T	no	Valor predeterminado que se utiliza si no se encuentra un valor en el almacenamiento de sesión.
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 useSessionStorage finalizo su carga.
value	T \| undefined	El valor actualmente almacenado en el almacenamiento de sesión.
setSessionStorage	(newValue: T) => void	Función para actualizar el valor en el almacenamiento de sesión.
onClearSessionStorage	() => void	Función para eliminar el valor asociado del almacenamiento de sesión.

Usos

Cargar un valor inicial

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

Actualizar un valor

const { setSessionStorage } = useSessionStorage({ name: "example_key" });
setSessionStorage("Nuevo valor");

Eliminar un valor

const { onClearSessionStorage } = useSessionStorage({ name: "example_key" });
onClearSessionStorage();

Usar una función personalizada para parsear valores

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

useLocalStorage Interfaces