Question

我正在使用反应库react-trello，并尝试将数据保存到本地存储中。

我的代码：

 import React, {Component} from 'react'
 import Board from 'react-trello'
 import './App.css'

class NewCardForm extends Component {
  handleAdd = () => this.props.onAdd({title: this.titleRef.value, description: this.descRef.value, label: this.label.value})
  setTitleRef = (ref) => this.titleRef = ref
  setDescRef = (ref) => this.descRef = ref
  setLabelRef = (ref) => this.label = ref
  render() {
  const {onCancel} = this.props
  return (
   <div style={{background: 'white', borderRadius: 3, border: '1px solid #eee', borderBottom: '1px solid #ccc'}}>
    <div style={{padding: 5, margin: 5}}>
      <div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setTitleRef} placeholder="User" />
        </div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setDescRef} placeholder="Task Description" />
        </div>
        <div style={{marginBottom: 5}}>
          <input type="text" ref={this.setLabelRef} placeholder="Date" />
        </div>
      </div>
      <button onClick={this.handleAdd}>Add</button>
      <button onClick={onCancel}>Cancel</button>
    </div>
  </div>
    ) 
  }
}


 function App() {

  const data = {
   lanes: [
   {
    id: 'board1',
    title: 'Incompleted Tasks',
    current: "70", // custom property
    target: "100", // custom property
    label: 'First board here',
    cards: [
      {
        id: 'Card1',
        title: 'Abhishek',
        description: 'Thanks. Please schedule me for an estimate on Monday.'
      },
      {
        id: 'Card2',
        title: 'Rohan',
        description: 'Email received at 1:14pm'
      }
    ]
   },
   {
    id: 'board2',
    title: 'Completed Tasks',
    label: 'Second board here',
    current: "30", // custom property
    target: "100", // custom property
    cards: [
      {
        id: 'Card3',
        title: 'Rachit',
        description: 'You are welcome. Interested in doing business with you again',
       }
       ]
      }
    ]
  }

  localStorage.setItem('data', JSON.stringify(data));
  var retrievedObject = localStorage.getItem('data');
  console.log('data: ', JSON.parse(retrievedObject));

  return (
   <div className="app">
      <h1>Notion to organize</h1>
    <p>
      Your team’s long term memory, all in one spot.Organize anything, together.
    </p>

    <Board
      onDataChange={(newData) => {console.log(newData)}}
      onCardAdd={(card) => {localStorage.setItem('data', JSON.stringify(card));
                        var retrievedObject = localStorage.getItem('data');
                        console.log(retrievedObject)}}
      style={{backgroundColor: '#FFFEFC'}}
      canAddLanes
      editable
      laneDraggable
      laneStyle={{backgroundColor: '#F9F5F1', marginRight: '50px', paddingTop: '20px'}}
      cardDraggable
      draggable
      data={JSON.parse(retrievedObject)}
      collapsibleLanes
      components={{NewCardForm: NewCardForm}} 
    >
  
      </Board>
    </div>
  )
}

export default App

当前，我正在渲染data来显示面板。我正在呼叫onCardAdd事件，该事件会在卡中的数据更改时触发。我可以成功获取卡内的数据。但是如何将数据保存到本地存储中，以便下次刷新页面时数据就在浏览器中。

您可以在此处找到该库。react-trello

谢谢您的帮助。

Answer 1

加入它，您可能不需要Cookie

您需要的是Cookie。

尝试使用react-cookie或react-cookies觉得不错的东西。

如果在使用类组件时使用react-cookie，则需要将您的应用包装为<CookiesProvider/>并使用高阶组件withCookies()方法。

您应尝试使用useEffect，在启动应用程序时，应首先检查localStorage是否有任何数据（即从中检索），如果没有，则只需启动新的。

请确保您没有直接与localStorage交谈，而是通过使用retrievedObject使用useState的副本，以便它可以响应。

this尚未完成，但可以为您提供想法

Answer 2

您可以在本地存储中使用React生命周期componentDidmount和getItem，然后对数据进行设置状态，并在您的组件中使用。

将prop数据存储在react.js中的本地存储中

2 个答案: