Cookies 将cookie或localstorage添加到我的react.js Web应用程序

我正在做我的第一个react.js项目，它是一个配方生成器

我的项目如下所示：

视图1：选择基本成分

观点2：选择更多成分

视图3：获取包含一些配料和基本配料的配方列表，单击一个配方

视图4：此处将显示choosen配方：）

现在，我想将cookies或localstorage添加到我的choosen配料中，以便在不清空配料数组的情况下重新加载页面

我的问题是我真的不知道怎么做

这是我设置基本成分的方式：

import React from 'react';
import Actions from '../../../actions/actions';
import BaseIngredientButton from './BaseIngredientButton';

class BaseIngredientItem extends React.Component {

  _OnClick (props) {
    Actions.addItem(this.props.baseIngredient)
    Actions.setBaseIngredient( this.props.baseIngredient )
  }

  render () {
    return (
      <BaseIngredientButton isChosen={this.props.isChosen} onClick={ this._OnClick.bind(this)} txt={ this.props.baseIngredient.name } />
    )
  }
}

BaseIngredientItem.propTypes = { 
  baseIngredient: React.PropTypes.object.isRequired,
  isChosen: React.PropTypes.bool
}

export default BaseIngredientItem;

从“React”导入React；
从“../../../Actions/Actions”导入操作；
从“/BaseIngredientButton”导入BaseIngredientButton；
基于类的CreditItem扩展了React.Component{
_OnClick（道具）{
Actions.addItem（this.props.baseComponent）
Actions.setBaseComponent（this.props.baseComponent）
}
渲染（）{
返回(
)
}
}
BaseingCreditItem.propTypes={
基本成分：React.PropTypes.object.isRequired，
isChosen:React.PropTypes.bool
}
导出默认的BaseingCreditItem；

有人能给我一些建议如何使这成为可能吗？

我使用 对客户端持久性的要求很高。它可以自动检测哪些浏览器存储机制可用，并为您提供跨所有存储解决方案的统一API。

---

Localeforage使用承诺，因此您需要为没有承诺支持的浏览器多填充承诺。

您可以通过调用localStorage.setItem（“BaseComponent”、“eggs”）来设置本地存储项，然后使用localStorage检索它。BaseComponent

不要使用基类。React更喜欢组合而不是继承。