如何在使用本地存儲維護頁面刷新後的狀態

每次用戶登錄時，即使有頁面重新載入，我也希望狀態保持爲'真'。狀態初始設置爲false，（讓_authed = false）。但是，當我重新加載頁面，它會回到假，這是索引頁。如何在使用本地存儲維護頁面刷新後的狀態

我做了什麼 當用戶登錄時，我保存用戶的細節的localStorage，並在用戶註銷時，我清除了localStorage的，我又把它設置爲false。（這工作正常）

在setAuthed（）函數中，我試圖檢查我存儲在localStorage中的用戶是否不爲null，它應該保持authed變量爲true。

但是，當我刷新頁面時，它不工作。有什麼，我做錯了嗎？幫助讚賞。

let _authed = false; 

// User logs in, set user in localStorage 
saveUser(user){ 
    _user = user; 
    localStorage.setItem('user', JSON.stringify(user)) 
}, 

//User clicks logout, set state to false 
setLogout(){ 
    _authed = false; 
    localStorage.clear() 
}, 

// If there is a user in local storage, always set state to true 
setAuthed(){ 
    if (localStorage.getItem("user") !== null) { 
     _authed = true; 
     } 
}, 


getAuthed(){ 
    return _authed; 
},

來源

2017-07-14 Wes

你在哪裏調用'setAuthed'？ –

調用這些函數的實際React代碼在哪裏？這些功能在哪裏生活？（希望不是全局範圍，而是一些庫對象，您正在導入/需要您的React組件？） –

它實際上是一種流量架構，代碼駐留在商店中 – Wes

您可以使用React lifecycle方法讀取和寫入某種持久狀態。在這裏我寫了一個小例子來展示它。

class Root extends React.Component { 
 
    state = { 
 
    isLoggedIn: false 
 
    } 
 
    
 
    componentDidMount() { 
 
    const persisState = localStorage.get('rootState'); 
 
    
 
    if (persistState) { 
 
     try { 
 
     this.setState(JSON.parse(pesistState)); 
 
     } catch (e) { 
 
     // is not json 
 
     } 
 
    } 
 
    } 
 
    
 
    componentWillUnmount() { 
 
    localStorage.set('rootState', JSON.stringify(this.state); 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     {this.props.children} 
 
     </div> 
 
    ) 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

來源

2017-07-14 20:38:59

如何在使用本地存儲維護頁面刷新後的狀態

回答

相關問題