Session Meteor中客户端的持久本地数据

我正在与Meteor+React合作。 问题在于如何在客户端本地存储持久数据

假设我有一个包含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>
    );
  }
}

我的目标是构建一个

VisitedList

组件，其中包含已访问文章的列表

我的解决方案使用

持久会话

包（）。有几个包，比如

persistentmiminongo

，但我需要一个稳定的解决方案。超过27k次下载的

u2622:persistent session

让我觉得它相当稳定。但是，我也不确定。现在谈谈我的解决方案

在

ComponentDidMount

部分的

文章

组件中，我正在处理持久会话变量，比如数组元素。让我解释一下。首先，我检查是否存在带有

键的
会话
变量
历史长度
。如果不是（这意味着用户第一次访问文章页面），我将设置一个名为
historyLength
的新持久变量，并等于0。我使用这个变量来存储我自己制作的“数组”的历史长度

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

看代码比我试图用文字解释代码更简单

因此，
文章
组件的代码：

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>
    );
  }
}

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>
    );
  }
}

最后是
访问列表
组件：

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>
    );
  }
}

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>
    );
  }
}

导出默认类VisitedList扩展组件{
renderVisited（）{
var visitedArticles=[]；
for（i=0；i{
返回
{each}
}
}
render（）{
返回(

{this.renderVisited（）}

);
}
}

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

我将在我的项目和购物车中建立这样的历史记录块。因此，如果有比我开始之前想知道的更有效、快速和正确的方法来解决这个问题，那么我想知道。谢谢你的回答！
Meteor
会话
使用这些天有些不鼓励（因为它污染了全局名称空间，所以很难跟踪它的内容并保持它的干净，等等。）由于它与Meteor的
会话
对象一起工作，我认为这将不是最适合未来的选项。因为您使用的是react，您是否考虑过将其用于客户端状态管理？Redux很快就会出现（如果还没有）成为javascript/react空间中最流行的应用程序状态容器。Redux本身不是持久性的，但是有几个附加库可以为您提供持久性功能，例如。
谢谢您的回答！实际上我看到了关于Redux的提到，但对它一无所知。在正常情况下使用Redux的原因是什么react应用程序很明显：组件只有状态，这是一次性的。但使用meteor，我们有不同的其他工具，比如Session。我的时间非常有限，所以要用新技术重新开始（redux）至少需要几天时间，正如我所看到的，redux是另一种构建应用程序的不同方式，而我已经有了project的工作版本。我想知道如何使用meteor应用程序的基本工具或小软件包在meteor应用程序中实现历史记录块或购物车之类的东西。