Как использовать функцию typescript, которая использует localStorage

#typescript

Вопрос:

Ребята, спасибо! Я пытаюсь создать универсальную функцию, используя дженерики.

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

Что не так?

вот ссылка https://codesandbox.io/s/async-feather-lmwxu?file=/src/helperFunction.ts

Ответ №1:

В localStorage ключ и значение должны быть строковыми. То есть setItem() метод принимает, что первый аргумент (который является ключом) должен быть строкой, а второй аргумент (значение) также должен быть строкой.

 setItem(key: string, value: string);

Пример:

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

Здесь все элементы, которые должны быть сохранены в локальном хранилище, сохраняются в виде строки. Сначала нам нужно преобразовать в строку.

Когда мы извлекаем, он возвращает сохраненную строку, а затем нам нужна логика синтаксического анализа.

Пример:

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

1. Я не хотел использовать JSON.stringify каждый раз. Что, если значение будет просто строкой или числом, тогда мне не нужно будет использовать JSON.stringify. В этом случае я должен использовать ее всегда

2. не требуется, если это строковое значение. Это всего лишь пример, которым я поделился.

3. JSON.stringify — это еще одно преобразование. Зачем это делать, если значение просто строка?

4. Если значение, которое нужно сохранить, является строкой, тогда нет необходимости в дальнейшем stringify . Но, это объект или массив, тогда нам нужно. Таким образом, у нас может быть логика для того же.

5. если нет необходимости в stringify, как создать функцию с помощью дженериков? Потому что функция может иметь объект, затем строку, затем число.

Ответ №2:

вы должны передать строку как value :

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

Затем создайте объект :

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

Редактировать:
Не хотите все время использовать stringify?

Если ваш объект всегда один и тот же, добавьте интерфейс объекта следующим образом:

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

Если нет, вам следует использовать any :

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

отредактированная песочница: https://codesandbox.io/s/vigorous-mestorf-xsfon

1. Я не хотел использовать JSON.stringify каждый раз. Что, если значение будет просто строкой или числом, тогда мне не нужно будет использовать JSON.stringify. В этом случае я должен использовать ее всегда

2. Я не могу использовать «any», потому что @typescript-eslint / no-explicit-any

3. и не знал типы значений?

4. Если его объект похож на этот {val:"val"} с другим именем, вы можете использовать `[key: string]: string`!