Cómo hacer una función de TypeScript que use localStorage

¡Qué tal chicos! Estoy intentando hacer la función universal usando genéricos.

export const setLocStor = <T, U>(key: T, val: U): void => localStorage.setItem(key, val);

¿Qué pasa?

aquí está el enlace https://codesandbox.io/s/async-feather-lmwxu?file=/src/helperFunction.ts

Respuesta #1

En localStorage, la clave y el valor deben ser cadenas. Es decir, el método setItem() acepta como primer argumento (que es la clave) debe ser una cadena y el segundo argumento (valor) también debe ser una cadena.

setItem(key: string, value: string);

Ejemplo :

let user={name: 'Anoop'};
localStorage.setItem('user', JSON.stringify(user));

Aquí todos los elementos que se deben guardar en el almacenamiento local se guardan como cadenas. Primero necesitamos convertir a cadena.

Cuando recuperamos, devuelve la cadena almacenada y luego necesitamos tener la lógica de análisis.

Ejemplo :

let user = JSON.parse(localStorage.getItem(user));

Respuesta #2

deberías pasar una cadena como value :

const setLocStor = (key: string, val: string): void => localStorage.setItem(key, val);

Luego convierte el objeto en cadena :

  const res = setLocStor("key", JSON.stringify({ val: "val" }));

EDITAR: ¿No quieres convertir a cadena todo el tiempo?

Si tu objeto siempre es el mismo, agrega la interfaz del objeto así:

const setLocStor = (key: string, val: { val: string }): void => localStorage.setItem(key, JSON.stringify(val));

Si no, deberías usar any :

const setLocStor = (key: string, val: any): void => localStorage.setItem(key, JSON.stringify(val));

sandbox editado: https://codesandbox.io/s/vigorous-mestorf-xsfon