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

【问题标题】：Add cookie or localstorage to my react.js webapplication将 cookie 或 localstorage 添加到我的 react.js Web 应用程序
【发布时间】：2016-03-05 09:58:23
【问题描述】：

我正在开发我的第一个 react.js 项目及其配方生成器。

我的项目如下所示：

视图 1：选择基础成分

查看2：选择更多成分

查看 3：获取包含一些成分和基本成分的食谱列表，单击一个食谱。

视图 4：选择的食谱将显示在这里 :)

现在我想将 cookie 或 localstorage 添加到我选择的成分中，以便在不清空我的成分数组的情况下重新加载页面。

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

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

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 更喜欢组合而不是继承。 reactjs.org/docs/composition-vs-inheritance.html

标签： cookies reactjs ecmascript-6

【解决方案1】：

我用localforage 主要用于客户端持久性。它会自动检测可用的浏览器存储机制，并为您提供跨所有存储解决方案的统一 API。 Localeforage 使用 Promise，因此您需要为不支持 Promise 的浏览器填充它们。

【讨论】：

【解决方案2】：

您可以通过调用 localStorage.setItem("baseIngredient", "eggs") 设置本地存储项，然后使用 localStorage.baseIngredient http://www.w3schools.com/html/html5_webstorage.asp 检索它

【讨论】：