Question

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

我的项目如下所示：

查看1：选择baseingredient

观点2：选择更多成分

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

视图4：选择配方将显示在此处：）

现在我想在我选择的成分中添加cookies或localstorage，以便可以重新加载页面而不会清空我的成分阵列。

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

这就是我设置baseingredient的方式：

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;

有人可以给我一些提示如何使这成为可能吗？

Answer 1

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

Answer 2

您可以通过调用localStorage.setItem（“baseIngredient”，“eggs”）设置本地存储项，然后使用localStorage.baseIngredient http://www.w3schools.com/html/html5_webstorage.asp

检索它

将cookie或localstorage添加到我的react.js webapplication

2 个答案: