在Meteor的客戶端持續存儲本地數據

Question

我正在使用Meteor + React。 問題是關於正確的方式在客戶端本地存儲持久性數據。

比方說，我有一個組件List有5篇文章的列表：

export default class List extends Component { 
    render() { 
    return(
     <ul> 
     <li><a href='/article1'>Article 1</li> 
     <li><a href='/article2'>Article 2</li> 
     <li><a href='/article3'>Article 3</li> 
     <li><a href='/article4'>Article 4</li> 
     <li><a href='/article5'>Article 5</li> 
     </ul> 
    ); 
    } 
} 

然後讓我們說，這Article組件應呈現像/articleN路線。

export default class Article extends Component { 
    render() { 
    return(
     <main> 
     .. 
     </main> 
    ); 
    } 
} 

我的目標是建立一個VisitedList組件，它containes已經訪問過的文章列表。

我的解決方案使用persistent-session包（link）。有幾個包如persistent-minimongo但我需要一個穩定解決方案。 u2622:persistent-session超過27K的下載讓我覺得它非常穩定。但是再次 - 我不知道。現在我的解決方案。

在ComponentDidMount部分的Article組件中，我使用持久會話變量（如數組元素）。讓我解釋。首先，我檢查是否存在具有keyhistoryLength的Session變量。如果不是（這意味着用戶首次訪問文章頁面），我設置了一個名爲historyLength的新持久變量，並且等於0.我使用這個變量來存儲我自己的歷史自制「數組」的長度。

然後我檢查當前文章是否在歷史中，如果沒有 - 我將它添加到歷史記錄中。事實上添加歷史記錄 - 正在設置一個新的持久變量，其中keyhistoryN，其中N = historyLength。

查看代碼更簡單，而不是我試圖用文字解釋它。

所以對於Article組件的代碼：

export default class Article extends Component { 
    componentDidMount() { 
      if (Session.get('historyLength')) { 
       console.log('history exists'); 
      } else { 
       Session.setPersistent('historyLength', 0); 
       console.log('first history init'); 
      } 

      var articleInHistory = false; 

      for(i = 0; i < Session.get('historyLength'); i++) { 
       var key = 'history' + i; 
       if(Session.equals(key, this.props.articleName)) { 
        articleInHistory = true; 
        console.log('already in history:', i); 
       } else { 
        console.log(i, 'product is not in history'); 
       } 
      } 
      if(!articleInHistory) { 
       var newHistoryKey = 'history' + (Session.get('historyLength')); 
       Session.setPersistent(newHistoryKey, this.props.articleName); 

       var curHistoryLength = Session.get('historyLength'); 
       Session.setPersistent('historyLength', curHistoryLength + 1); 
      } 
    } 
    render() { 
    return(
     <main> 
     .. 
     </main> 
    ); 
    } 
} 

此代碼的工作是正確的。我可以在任何組件訪問Session.get('historyLength')然後得到訪問文章的名稱與for循環：

for(i = 0; i < Session.get(historyLength); i++) { 
    let key = "history" + i; 
    console.log(key, Session.get(key)); 
} 

最後VisitedList組件：

export default class VisitedList extends Component { 
    renderVisited() { 
    var visitedArticles = []; 
    for(i = 0; i < Session.get(historyLength); i++) { 
     let key = "history" + i; 
     visitedArticles.push(Session.get(key)); 
    } 

    return visistedArticles.map((each) => { 
     return <li> {each} </li> 
    } 
    } 
    render() { 
    return(
     <ul> 
     { this.renderVisited() } 
     </ul> 
    ); 
    } 
} 

我的問題是：是我的解決方案來存儲正確的方法和使用本地持久數據？這個例子很簡單，而不是來自真實的項目，但它顯示了問題和問題的解決方案。

我打算在我的項目和購物車中建立這樣的歷史塊。因此，如果有更高效，快速和正確的方法來解決這個問題，比我想在開始之前就知道它。謝謝您的回答！

Answer 1

流星Session這些日子的使用有點令人沮喪（因爲它污染了全局命名空間，可能很難追蹤其內容並保持清潔等）。由於u2622:persistent-session適用於流星的Session對象，我不認爲這將是最有前途的選擇。既然你在使用反應，你有沒有考慮使用redux爲你的客戶端狀態管理？ Redux很快（如果它尚未成爲）javascript/react空間中最流行的應用程序狀態容器。 Redux本身並不是永久性的，但是有幾個附加庫可以提供持久性功能，如redux-persist。