Javascript 将道具数据存储在react.js的本地存储器中

我正在开发一个react库

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

import React，{Component}来自“React”
从“react trello”导入板
导入“./App.css”
类NewCardForm扩展组件{
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
返回(
添加
取消
) 
}
}
函数App（）{
常数数据={
车道：[
{
id:‘board1’，
标题：“未完成的任务”，
当前：“70”，//自定义属性
目标：“100”，//自定义属性
标签：“这里的第一块板”，
卡片：[
{
id:'Card1'，
标题:"阿披实",，
描述：“谢谢。请安排我在周一进行评估。”
},
{
id:'Card2'，
标题：“罗汉”，
描述：“下午1:14收到的电子邮件”
}
]
},
{
id:‘board2’，
标题：“已完成的任务”，
标签：“此处为第二板”，
当前：“30”，//自定义属性
目标：“100”，//自定义属性
卡片：[
{
id:'卡3'，
标题：“拉希特”，
描述：'不客气。有兴趣再次与您做生意'，
}
]
}
]
}
setItem（'data'，JSON.stringify（data））；
var retrievedObject=localStorage.getItem（'data'）；
log（'data:'，JSON.parse（retrievedObject））；
返回(
组织理念

你们团队的长期记忆都集中在一个地方。一起组织一切。

{console.log（newData）}
onCardAdd={（卡）=>{localStorage.setItem（'data'，JSON.stringify（卡））；
var retrievedObject=localStorage.getItem（'data'）；
console.log（retrievedObject）}
style={{backgroundColor:'#FFFEFC'}}
卡纳德兰
可编辑
可拉格的
laneStyle={{背景颜色：'#F9F5F1'，边框右侧：'50px'，填充顶部：'20px'}}
卡德拉格
拖动
data={JSON.parse（retrievedObject）}
可折叠车道
components={{NewCardForm:NewCardForm}}
>
)
}
导出默认应用程序

目前我正在将

数据

渲染到显示板。我正在调用

onCardAdd

事件，每当卡中的数据发生更改时就会触发该事件。我成功地获得了卡内的数据。但如何将数据保存到本地存储，以便下次刷新页面时，数据在浏览器上

你可以在这里找到图书馆

---

谢谢你的帮助。

来吧，你可能不需要饼干

你需要的是一块饼干

试着用你喜欢的或你喜欢的

如果在使用类组件时使用

react cookie

，则需要 将应用程序包装在

中并使用更高的顺序 组件

withCookies（）

方法

您应该尝试使用

useffect

，当您启动应用程序时，如果您有任何数据（即从中检索），您应该首先检查您的

localStorage

，如果没有，您只需启动新的数据

确保您不直接与

localStorage

通话，而是使用

useState

使用

retrievedObject

的副本，以便它能够响应

---

这不是一项完整的工作，但它给了您一个想法

您可以使用React lifecycle组件从本地存储中挂载和获取项目，然后设置数据状态，并在您的组件中使用它。

我尝试了

cookieprovider

即将我的电路板包裹在它周围，但它不起作用。您能帮忙吗。我的意思是在沙盒上试用并检查？等等，实际上你仍然可以使用localStorage，但你需要在你的应用程序中添加useEffect。让我给你看看，这将是很大的帮助！谢谢你提出解决方案了吗？