我使用 React 创建了一个简单的 Todos 应用程序，并已实现localStorage以在页面刷新之间保留数据。实现是这样的：

loadStateFromLocalStorage() {
  for (let key in this.state) {
    if (localStorage.hasOwnProperty(key)) {
      let value = localStorage.getItem(key);

      try {
        value = JSON.parse(value);
        this.setState({ [key]: value });
      } catch (e) {
        // handle empty string
        this.setState({ [key]: value });
      }
    }
  }
}
saveStateToLocalStorage() {
  for (let key in this.state) {
    localStorage.setItem(key, JSON.stringify(this.state[key]));
  }
}

如果需要的话，我完全App.js是在这里（和代码在GitHub托管在这里）：

import React, { Component } from 'react';
import './App.css';
import Search from './components/Search.js';
import Todos from './components/Todos.js';
import Filters from './components/Filters.js';
import { TodoFilter, InitialState } from './common';
import GitHubIcon from './components/GitHubIcon.js'


class App extends Component {

  state = InitialState;

  // Local Storage
  loadStateFromLocalStorage() {
    for (let key in this.state) {
      if (localStorage.hasOwnProperty(key)) {
        let value = localStorage.getItem(key);

        try {
          value = JSON.parse(value);
          this.setState({ [key]: value });
        } catch (e) {
          // handle empty string
          this.setState({ [key]: value });
        }
      }
    }
  }
  saveStateToLocalStorage() {
    for (let key in this.state) {
        localStorage.setItem(key, JSON.stringify(this.state[key]));
    }
  }

  // Lifecycle methods
  componentDidMount() {
    // Load state from localStorage
    this.loadStateFromLocalStorage();

    // Resizing page
    this.setState({width: window.innerWidth});
    window.addEventListener("resize", this.updateDimensions);

    // Set localStorage on refresh/reload
    window.addEventListener(
      "beforeunload",
      this.saveStateToLocalStorage.bind(this)
    );
  }
  componentWillUnmount() {
    // Remove listeners
    window.removeEventListener(
      "beforeunload",
      this.saveStateToLocalStorage.bind(this)
    );
    window.removeEventListener("resize", this.updateDimensions);

    // Save state to localStorage
    this.saveStateToLocalStorage();
  }

  updateDimensions = () => {
    this.setState({ 
      width: window.innerWidth
    });
  }

  // Add a new Todo
  handleSubmit = (event) => {
    event.preventDefault();
    if(this.state.currentTodoText !== "") {
      const newTodo = {
        id: Date.now(),
        text: this.state.currentTodoText,
        checked: false
      };
      const todos = [...this.state.todos, newTodo];
      this.setState({todos});
      this.setState({currentTodoText: ""});
      document.querySelector(".search input").value = "";
    }
  }

  // Update current Todo text
  handleChange = (event) => this.setState({currentTodoText: event.target.value})

  resetData = (event) => {
    event.preventDefault();
    this.setState({todos: InitialState.todos});
    this.setState({currentTodoText: InitialState.currentTodoText});
    this.setState({currentFilter: InitialState.currentFilter});
    document.querySelector(".search input").value = "";
  }

  // Delete a Todo
  handleDelete = (todo) => {
    const todos = this.state.todos.filter((td) => td.id !== todo.id)
    this.setState({todos})
  }

  // Check a Todo
  handleCheck = (todo) => {
    const todos = this.state.todos.map((td) => td.id === todo.id ? {...td, checked: !td.checked} : td)
    this.setState({todos})
  }

  // Change Todo filter
  handleFilter = (filter) => {
    switch (filter) {
      case TodoFilter.filterCompleted: {
        this.setState({currentFilter: TodoFilter.filterCompleted})
        break;
      }
      case TodoFilter.filterUncompleted: {
        this.setState({currentFilter: TodoFilter.filterUncompleted})
        break;
      }
      case TodoFilter.all: {
        this.setState({currentFilter: TodoFilter.all})
        break;
      }
      default: {
        this.setState({currentFilter: TodoFilter.all})
        break;
      }
    }
  }

  render() {
    return (
      <div className="App">
        <Search handleChange={this.handleChange} handleSubmit={this.handleSubmit} resetData={this.resetData}/>
        <Filters handleFilter={this.handleFilter} currentFilter={this.state.currentFilter}/>
        <Todos todos={this.state.todos.filter(
          (todo) => {
            switch (this.state.currentFilter) {
              case TodoFilter.filterCompleted: return todo.checked;
              case TodoFilter.filterUncompleted: return !todo.checked;
              case TodoFilter.all: return true;
              default: return true;
            }
          }
        )} handleDelete={this.handleDelete} handleCheck={this.handleCheck}/>
        <GitHubIcon />
      </div>
    );
  }
}

export default App;

这适用于桌面，但我在 Heroku ^[1]上托管了该应用程序，以查看它是否也适用于移动设备，并且数据不会通过页面刷新保持不变。localStorage 在移动设备和桌面设备上的工作方式不同吗？如何实现 localStorage 以在我的手机和桌面上工作？

^[1]由于我通过将应用程序重新部署到 Heroku 来测试接受的答案，之前此处的链接不再运行包含我的问题的代码，因此我已将其删除 - 请参阅此处修复我的问题的提交。