localStorage可在台式机上使用，但不能在移动设备上使用(iOS版本12.2) [英] localStorage works on desktop but not mobile (iOS version 12.2)

问题描述

我使用React创建了一个简单的Todos应用程序，并实现了localStorage以便在页面刷新之间持久保存数据.实现是这样的:

I have created a simple Todos app using React, and have implemented localStorage in order to persist data between page refreshes. The implementation is something like this:

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 这里):

If needed, my full App.js is here (and the code is hosted on GitHub here):

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在手机和台式机上都能正常工作?

This works on desktop, but I hosted the app on Heroku^[1] to see if it works on mobile too and data isn't persisting through page refreshes. Does localStorage work differently on mobile vs desktop? How do I implement localStorage to work both on my phone and my desktop?

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

^[1] Since I tested the accepted answer by redeploying the app to Heroku, the link previously here no longer runs off the code which contained my issue and thus I've removed it - See the commit which fixed my issue here.

推荐答案

我发现了问题，beforeunload safari mobile不支持此事件. 查看此文档事件/beforeunload

I found the problem, beforeunload safari mobile does not support this event. Look this docs Events/beforeunload

这篇关于localStorage可在台式机上使用，但不能在移动设备上使用(iOS版本12.2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！