Добавление / удаление данных в локальном хранилище браузера с помощью кнопки и отображение их в таблице пользовательского интерфейса (React)

Question

Я хотел бы иметь приложение реагирования, которое использует локальное хранилище для хранения данных и отображает эти данные в таблице в пользовательском интерфейсе.

Я хочу иметь возможность отправить запись в локальное хранилище, нажав кнопку (ОТПРАВИТЬ), а затем можно удалить запись в локальном хранилище, нажав другую кнопку (УДАЛИТЬ).

И какие бы данные не находились в локальном хранилище, я бы хотел, чтобы они отображались в небольшая таблица в пользовательском интерфейсе даже после обновления браузера.

Я использовал это руководство (https://www.robinwieruch.de/local-storage-react#local -storage-in-реакция ) в качестве основы для локального хранилища и предоставил код, который я использую из этого учебника ниже. Но в учебнике данные передаются путем ввода в поле и отображения их в абзаце. И из инструментов разработчика я вижу, что это только для одной пары ключ-значение.

КОД:

import React from 'react';

const useStateWithLocalStorage = localStorageKey => {
  const [value, setValue] = React.useState(
    localStorage.getItem(localStorageKey) || ''
  );

  React.useEffect(() => {
    localStorage.setItem(localStorageKey, value);
  }, [value]);

  return [value, setValue];
};

const App = () => {
  const [value, setValue] = useStateWithLocalStorage(
    'myValueInLocalStorage'
  );

  const onChange = event => setValue(event.target.value);

  return (
    <div>
      <h1>Hello React with Local Storage!</h1>

      <input value={value} type="text" onChange={onChange} />

      <p>{value}</p>
    </div>
  );
};

export default App;

Из учебника я считаю, что данные будут:

Отправлено в локальное хранилище с использованием localStorage.setItem('myData', data)

Отображается в таблице с использованием localStorage.getItem('myData')

Удалено из локального хранилища / таблицы с использованием localStorage.removeItem('myData') или localStorage.clear()

Я предполагаю, что каждый из предыдущих фрагментов кода будет в отдельной функции, которая вызывается в return().

Я приложил ниже, что я пытаюсь создать, в частности, как будет выглядеть пользовательский интерфейс:

Отправка данных в локальный хранение осуществляется с помощью кнопки SUBMIT, а данные удаляются из локального хранилища с помощью кнопки DELETE в таблице, а все, что отображается в таблице, - из локального хранилища.

Дайте мне знать, если требуется дополнительная информация , Есть так много способов сделать это, и я, честно говоря, не знаю, что делать. Например, если мне нужно создать класс с несколькими функциями в классе, которые делают то, что я описал выше (например, функцию для отправки, другую для удаления и одну для извлечения данных из таблицы).

Answer 1

Для хранения массивов в локальном хранилище используйте JSON .stringify, иначе вы в конечном итоге сохраните строку, разделенную запятыми

Таким образом, необходимо изменить код для пользовательского обработчика, чтобы использовать JSON .stringify и JSON .parse

const useStateWithLocalStorageArray = localStorageKey => {  
  const [value, setValue] = React.useState(
    JSON.parse(localStorage.getItem(localStorageKey) || '[]' ) 
  );
  React.useEffect(() => {
    localStorage.setItem(localStorageKey, JSON.stringify(value))    
  }, [value]);
  return [value, setValue];
};

Вот полный источник в Plunker - https://plnkr.co/edit/NuSBnLpPpoOmmEE6