Question

这是我问的另一个问题，Adding/deleting data into local browser storage using a button, and displaying it in a UI table (React)

的延续

我试图检查localStorage并使用发射器告诉控制台localStorage是否为空。

我相信我有2个问题。

该应用在初始化时（打开浏览器时）需要检查localStorage
我需要使用useState，以便每次添加/删除值时都会检查localStorage

以下是我的尝试（index.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');
}

但是它没有按我预期的那样工作。将会发生什么：

我启动React App（控制台未显示“本地存储为空”）
我提交了一个值，控制台显示“本地存储为空”
刷新浏览器，“本地存储为空”消息消失
如果我再次添加另一个值，则会发生相同的过程。

应该发生什么（如果以空的localStorage开头）：

我启动React App（控制台说“本地存储为空”）
我提交了一个值（仅提供一个值），没有消息发送给控制台
我刷新页面，但仍然没有控制台消息
我删除了一个值，控制台上显示“本地存储为空”消息

我相信我没有正确使用React挂钩，所以我初始化了挂钩：

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

然后我尝试在const App内这样使用它：

checkLocalStorage(setLocalValue)

我不确定，我在做什么错，就像我之前说的那样，我认为我没有正确使用钩子，如果需要更多信息，请告诉我。

Answer 1

您可以使用“ onstorage”事件检查其更新时间。例如，在您应用的根目录上：

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);
  }, []);
}

如何使用React钩子检查localStorage是否为空？

1 个答案: