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组件，其中包含已访问过的文章列表。

我的解决方案使用persistent-session包（link）。有几个包，如persistent-minimongo但我需要稳定解决方案。 u2622:persistent-session超过27,000次下载让我觉得它非常稳定。但同样 - 我不确定。现在关于我的解决方案。

在Article部分的ComponentDidMount组件中，我正在使用持久会话变量，例如数组元素。让我解释。首先，我检查是否存在Session key的{{1}}变量。如果不是（这意味着用户第一次访问文章页面），我设置了一个名为historyLength的新持久变量，并且等于0.我使用此变量来存储我自己的历史自制“数组”的长度。

然后我检查当前文章是否在历史记录中，如果没有 - 我将其添加到历史记录中。实际上添加到历史记录 - 正在使用historyLength key设置一个新的持久变量，其中historyN。

查看代码更简单，而不是我试图用文字解释它。

所以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

我的问题是：我的解决方案是否正确存储和使用本地持久数据？这个示例很简单，而不是来自真实项目，但它显示了问题和问题的解决方案。

我打算在我的项目和购物车中构建这样的历史记录块。因此，如果有更有效，快速和正确的方法来解决这个问题，那么在我开始之前我想知道它。谢谢你的回答！

Answer 1

近来气流Session的使用有点气馁（因为它污染了全局命名空间，很难跟踪其内容并保持清洁等等）。由于u2622:persistent-session适用于Meteor的Session对象，因此我不认为这将是最具前瞻性的选项。既然您正在使用反应，您是否考虑过使用redux进行客户端状态管理？ Redux很快（如果它还没有）成为javascript / react空间中最受欢迎的应用程序状态容器。 Redux本身并不具有持久性，但有几个附加库可以为您提供持久性功能，例如redux-persist。

Meteor客户端上的持久本地数据

1 个答案: