使用帶有React的本地存儲使用戶保持刷新狀態

Question

我正在嘗試使用本地存儲，以便在刷新時，用戶仍然登錄而不是每次都注銷。 我已經設法使用以下代碼將數據保存到本地存儲中（我使用的是Firebase，因此我將其中的很多內容省略）：

 saveToLocal(){
    const local = this.state.loggedIn;
    localStorage.setItem("loggedIn", JSON.stringify(local));
}

loginUser(e){
    e.preventDefault();      
    this.setState({
        loggedIn: "true"
    }, 
    this.saveToLocal);

現在我該如何訪問本地存儲中的數據，並立即設置狀態，以便用戶在刷新時保持登錄狀態？ 這是我的狀態：

constructor(){
    super();

    this.state = {
        loggedIn: ""
    }

謝謝！

Answer 1

您可以做這樣的事情。 在根組件中，跟蹤用戶的登錄/注銷狀態。 如果您已經有localStorage項，則只需讀取localStorage的componentDidMount值並根據該值設置狀態。

localStorage.getItem('loggedIn')

但是也許更好的解決方案是使用cookie，具體取決於您希望保持用戶登錄的數量。使用cookie，您可以將時間維度添加到整個邏輯中。