在React中的秒表上设置localstorage.getItem（）值

Question

我创建了一个秒表，它将在后台运行。

当我运行时钟时，将其设置为localstorage：

localStorage.setItem ('timerOn', true);

localStorage.setItem ('timerTime', Date.now () - this.state.timerTime) 

当我停止本地存储中设置的时钟时：

localStorage.setItem ('timerOn', false);

localStorage.setItem ('timerTime', Date.now () + this.state.timerTime);

我在时钟上重置这些值时遇到问题：

LocalStorage.getItem ('timerOn')

LocalStorage.getItem ('timerTime')

有人可以建议吗？ 如果我关闭浏览器，该秒表将如何工作？

此处的示例： https : //stackblitz.com/edit/react-jj7jef

class Stopwatch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timerOn: false,
      timerStart: 0,
      timerTime: 0
    };
  }


  startTimer = () => {
    const { timerOn, timerTime, timerStart } = this.state;


    this.setState({
      timerOn: true,
      timerTime: this.state.timerTime,
      timerStart: Date.now() - this.state.timerTime
    });
    this.timer = setInterval(() => {
      this.setState({
        timerTime: Date.now() - this.state.timerStart
      });
    }, 10);

    localStorage.setItem('timerOn', true);
    localStorage.setItem('timerTime', Date.now() -       this.state.timerTime)
};

stopTimer = () => {
  this.setState({ timerOn: false });
  localStorage.setItem('timerOn', false);
  localStorage.setItem('timerTime', Date.now() +    
   this.state.timerTime);
  clearInterval(this.timer);
};

  render() {
    const { timerTime } = this.state;
    let centiseconds = ("0" + (Math.floor(timerTime / 10) % 100)).slice(-2);
    let seconds = ("0" + (Math.floor(timerTime / 1000) % 60)).slice(-2);
    let minutes = ("0" + (Math.floor(timerTime / 60000) % 60)).slice(-2);
    let hours = ("0" + Math.floor(timerTime / 3600000)).slice(-2);

    return (
      <div>
        <div className="Stopwatch-display">
          {hours} : {minutes} : {seconds} 
        </div>

        {(
          <button onClick={this.startTimer}>Start</button>
        )}

        {this.state.timerOn === true && this.state.timerTime > 0 && (
          <button onClick={this.stopTimer}>Stop</button>
        )}
      </div>
    );
  }
}

Answer 1

在localStorage setItem中，您必须这样做

localStorage.setItem('Item name', JSON.stringify(item));

然后在get方法

let x = await localStorage.getItem('Item name'); let y = JSON.parse(x); console.log(y);

Answer 2

以下代码将执行如下所述的功能：

• 如果时钟正在运行并关闭了窗口并在以后响应，它将仍在计数。
• 如果我们停止时钟并重新开始，它将从当前时间开始。
• 如果我们停止时钟并关闭窗口，请再次响应它会显示最后的计数时间，您可以从此处开始。

如果需要，您还可以添加一个重置按钮。

class Stopwatch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      timerOn: false,
      timerStart: 0,
      timerTime: 0
    };
  }

  async componentDidMount() {
    let timerOn = localStorage.getItem('timerOn') === "true";
    let timerStart = localStorage.getItem('timerStart')
    let timerTime = localStorage.getItem('timerTime')

    await this.setState({
      timerOn: timerOn,
      timerStart: timerStart,
      timerTime: timerTime
    });

    if (timerOn) {
      this.startTimer()
    }
  }


  startTimer = (e) => {
    let { timerOn, timerTime = 0, timerStart = 0 } = this.state;

    if (e && timerOn) {
      return // stop continuous start button click
    }

    if (!timerOn) {
      // stop / pause state
      // start / resume from current time
      timerStart = Date.now() - timerTime
    }
    else if (timerOn) {
      // running state
      // calculate and compensate closed time
      timerTime = Date.now() - timerStart
    }

    this.setState({
      timerOn: true,
      timerTime: timerTime,
      timerStart: timerStart
    });

    this.timer = setInterval(() => {
      this.setState({
        timerTime: Date.now() - timerStart
      });
    }, 10);

    localStorage.setItem('timerOn', true);
    localStorage.setItem('timerStart', timerStart)
    localStorage.removeItem("timerTime")
  };

  stopTimer = () => {
    this.setState({ timerOn: false });
    localStorage.setItem('timerOn', false);
    localStorage.setItem('timerTime', this.state.timerTime);
    localStorage.removeItem("timerStart")
    clearInterval(this.timer);
  };

  render() {
    const { timerTime = 0 } = this.state;
    let centiseconds = ("0" + (Math.floor(timerTime / 10) % 100)).slice(-2);
    let seconds = ("0" + (Math.floor(timerTime / 1000) % 60)).slice(-2);
    let minutes = ("0" + (Math.floor(timerTime / 60000) % 60)).slice(-2);
    let hours = ("0" + Math.floor(timerTime / 3600000)).slice(-2);

    return (
      <div>
        <div className="Stopwatch-display">
          {hours} : {minutes} : {seconds}
        </div>

        {(
          <button onClick={this.startTimer}>Start</button>
        )}

        {this.state.timerOn === true && this.state.timerTime > 0 && (
          <button onClick={this.stopTimer}>Stop</button>
        )}
      </div>
    );
  }
}


render(<Stopwatch />, document.getElementById('root'));