javascript - 反应本地存储

Question

我正在尝试通过 React 中的单击功能来增加全局计数器并将增加的计数器保留在 localStorage 中。目前，它仅在您在同一页面上并将数据传递到另一个页面时才有效。但是，一旦您单击返回并再次增加计数器，数据就会从零开始重置，而不是从存储的计数器开始。如果这是有道理的。帮助！我如何从存储的数据而不是状态数据中计数？

这是代码：

 handleIncrement = counter => {
    const courses = [...this.state.courses]; //clones new arrays of counters
    const index = courses.indexOf(counter); // gets obj index that we receive as parameter
    courses[index] = {...counter}; //sets current index to new cloned counter
    courses[index].value++; //increments current index
    //console.log(this.state.counters[index]);
    let value = this.state.courses[0].value + this.state.courses[1].value + this.state.courses[2].value + this.state.courses[3].value +  this.state.courses[4].value + this.state.courses[5].value
    let name1 = this.state.courses[0].name
    localStorage.setItem("list", value );
    this.setState({courses}); //updates the view
};

标签： javascriptreactjs

Answer 1

我只是重做了点击事件的逻辑并且它起作用了。这是我的解决方案：

handleIncrement = counter => { if (localStorage.getItem("list") === null) {

  localStorage.getItem("list" );

}else{
  const courses = [...this.state.courses]; //clones new arrays of counters
  const index = courses.indexOf(counter); // gets obj index that we receive as parameter
  courses[index] = {...counter}; //sets current index to new cloned counter

  courses[index].value++; //increments current index
  //console.log(this.state.counters[index]);
  let allcookies = Number(localStorage.getItem('list')) + 1
  localStorage.setItem("list", allcookies );


  this.setState({courses}); //updates the view
   //let name1 = this.state.courses[0].name;

}

};