检查本地存储在ReactJS中是否有对象

如何解决检查本地存储在ReactJS中是否有对象

我已经建立了带有路线的网站，并且我正在使用localstorage在路线之间传输数据。

所以我创建了onClick处理程序，使用JSON.stringify将数据存储在本地存储中，如下所示：

const [build,setBuild] = useState({section: ['build']});
const [promote,setPromote] = useState({section: ['promote']});
const [ad,setAd] = useState({section: []});


 //..later on function that save localstorage and route to another page

localStorage.setItem('buildobject',JSON.stringify(build));
localStorage.setItem('adobject',JSON.stringify(ad));
localStorage.setItem('promoteObject',JSON.stringify(promote));

接下来，我要像这样从存储中引诱数据：

useEffect(() => {
   //Check if buildobject isn't empty
   if (JSON.parse(localStorage.getItem('buildobject')) !== null) {
       //Do something
   }
   if (JSON.parse(localStorage.getItem('promoteObject')) !== null) {
       //Do something
   }
   if (JSON.parse(localStorage.getItem('adobject')) !== null) {
       //Do something
   }
},[]);

问题是，即使ad状态为空，它也会显示自己为非空，并且if语句将被覆盖。

如何检查localstorage内部是否有对象以及该对象是否为空？

解决方法

您已将localStorage.setItem('adObject',JSON.stringify(ad))设置为对象具有空数据；您将获得JSON.parse(localStorage.getItem('adObject'))之前设置的相同内容。只是检查，

const adStorage = JSON.parse(localStorage.getItem('adObject'));
if (adStorage !== null && adStorage.section.length) {
    //Do something
}

,

您可以使用for in循环进行操作：

const adData = JSON.parse(localStorage.getItem('adObject'));

for (const property in adData) {
    if (ad.property.length) {
        // do something
    }
}