Как проверить, что localStorage пуст с React-хуками?

Question

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

Я пытаюсь проверить localStorage и использовать эмиттер, чтобы сообщить консоли, если localStorage пусто от каких-либо значений.

Я считаю, что у меня есть 2 проблемы.

1. Требуется приложение чтобы проверить localStorage, когда он инициализируется (когда браузер открыт) * ​​1012 *
2. Мне нужно использовать useState, так что localStorage проверяется каждый раз, когда значение добавляется / удаляется

Ниже моя попытка (индекс. js):

import React,{useState} from 'react';
import ReactDOM from 'react-dom';
const EventEmitter = require('events');

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];
};

const checkLocalStorage = function() {
  const myEmitter = new EventEmitter();
  myEmitter.on('event', () => {
    if (localStorage.getItem('customKey1') === '[]') {
      console.log('Local storage is empty');
    }
  });
  return myEmitter.emit('event');
}

const App =()=>{
  const [items,setItems] = useStateWithLocalStorageArray('customKey1')
  const [value,setValue] = useState({NAME:'',AGE:'',SALARY:''})
  const [localValue, setLocalValue] = useState('')


  const updateValue = e =>{
     setValue({...value,[e.target.id]:e.target.value})
  }


  return(
    <div>
      <div>
        <input value={value.NAME} id='NAME' placeholder='Name' onChange={(e)=>updateValue(e)}/>
        <input value={value.AGE } id='AGE' placeholder='Age' onChange={(e)=>updateValue(e)}/>
        <input value={value.SALARY} id='SALARY' placeholder='Salary' onChange={(e)=>updateValue(e)}/>
      <button onClick={()=>{
        setItems([...items,{...value}])
        setValue({NAME:'',AGE:'',SALARY:''})
        checkLocalStorage(setLocalValue)
        }}>ADD ITEM</button></div>

      <br/>
      <div>List of Items</div>
      <br/>
      { items &&
      <div>
        {
            items.map((item,index)=>(
              <li key={index}>{item.NAME}-{item.AGE}-{item.SALARY} <button onClick={()=>{
                setItems(items.filter((value,iindex) => iindex !== index))
                checkLocalStorage(setLocalValue)
              }}>Remove</button> </li>
            ))
        }
      </div>
    }
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));

Я сделал функцию checkLocalStorage(), которая должна вызываться при каждом добавлении или удалении значения:

const checkLocalStorage = function() {
  const myEmitter = new EventEmitter();
  myEmitter.on('event', () => {
    if (localStorage.getItem('customKey1') === '[]') {
      console.log('Local storage is empty');
    }
  });
  return myEmitter.emit('event');
}

Но это не работает, как я ожидаю. Что произойдет:

1. Я запускаю приложение React (консоль не говорит «Локальное хранилище пусто»)
2. Я отправляю значение, консоль говорит: «Локальное хранилище пусто «
3. Я обновляю sh браузер, и сообщение« Локальное хранилище пусто »исчезает
4. Если я снова добавлю другое значение, произойдет тот же процесс.

Что ДОЛЖНО произойти (если начать с пустого localStorage):

1. Я запускаю приложение React (консоль говорит «Локальное хранилище пусто»)
2. Я отправляю значение (присутствует только одно значение), нет сообщения на консоль
3. Я обновляю страницу sh и все еще нет сообщения консоли
4. Я удаляю значение, в консоли появляется сообщение «Локальное хранилище пусто»

Мне кажется, я не правильно использую React-хуки, я инициализировал хук:

const [localValue, setLocalValue] = useState('')

Затем я пытаюсь использовать его внутри const App:

checkLocalStorage(setLocalValue)

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

Answer 1

Вы можете использовать событие «onstorage», чтобы проверить, когда оно обновляется. Например на root вашего приложения:

window.addEventListener('storage', event => {
  // event contains
  // key – the key that was changed
  // oldValue – the old value
  // newValue – the new value
  // url – 
  // storageArea – either localStorage or sessionStorage object where the update happened.
});

const useStorage = (storageName) => {

  const checkStorage = key => {
     const storedData = localStorage.getItem(key);
     if (!storedData) console.log('Local storage is empty');
  }

  useEffect(() => {
   // when app loaded
   checkStorage(storageName)

    // when storage updated
    const handler = ({key}) => checkStorage(key);
    window.addEventListener('storage', handler);
    retunr () => window.removeEventListener('storage', handler);
  }, []);
}