(React.js) 如何获取localStorage的当前值？答案

【问题标题】：(React.js) how to get the current value of localStorage?(React.js) 如何获取localStorage的当前值？
【发布时间】：2019-11-26 04:51:28
【问题描述】：

我正在尝试使用 react 钩子同步本地存储和状态，但即使我设置了 setTimeout()，我也无法获得正确的值，

例如，我在尝试在数组中保存一个新键，如果我直接打印状态或本地存储，我仍然得到之前的状态，但是如果打印组件返回后的状态我得到正确的值，我该怎么做？

这样我还是得到以前的状态，

const onSave = () => {
 setState(prevState => [...prevState, {...newState}])            
 localStorage.setItem('localState', JSON.stringify(state)) ;          
 console.log(JSON.parse(localStorage.getItem('localState')))   <--  //still getting the previous state :(
}

但是如果我这样做，那么我会得到正确的值，但我无法正确设置本地存储，或者我可以吗？

const App = (props) =>{
 const onSave = () =>{
  setState(prevState => [...prevState, {...newState}])            
  localStorage.setItem('localState', JSON.stringify(state)) ; 
 }
 return(
 <div>
  { console.log(JSON.parse(localStorage.getItem('localState'))) }  <<-- correct state, wrong place
</div>
 )  
}

谢谢你们！

【问题讨论】：

您可能需要使用setState 回调函数。

标签： javascript reactjs local-storage

【解决方案1】：

setState 函数是异步的，因为您立即将数据保存到本地存储，它正在保存旧状态本身

尝试将您的功能更改为

const onSave = () =>{
  setState(prevState => [...prevState, {...newState}])            
}
useEffect(() => {
  localStorage.setItem('localState', JSON.stringify(state)) ;          
  console.log(JSON.parse(localStorage.getItem('localState'))) 
}, prevState)

【讨论】：

可以写多个使用效果
@JSMITH，你可以在一个功能组件中使用多个useEffect，具有不同的依赖关系，你可以用你正在使用的useEffect函数更新你的问题

【解决方案2】：

代码：

var cookieValue = document.getElementById("demo");      
        var value = cookieValue.getAttribute('value');
        if(typeof(Storage)!=="undefined")
        {
            console.log(value);
            localStorage.setItem("GetData" , value);
            console.log(localStorage.getItem("GetData"));

        }

    function loading()
    {
            console.log("coming");
            var allcookies = localStorage.getItem('GetData');
            console.log(allcookies);

    }

【讨论】：