这是在 localStorage 中存储数据列表并在使用 React 应用程序搜索时显示它们的最佳方式

Question

I'm trying to build a movie directory kinda like a todo-list app but here you can store your favorite movies and can search and display them by searching with the name of the movie. So I'm using the localStorage to store the data and then display when the search result matches the movie name string. On 'submit' of a button I can see the localStorage has the data but the data is not stored permanently. It just gets removed when I tried to enter the next input. So how can I resolve the issue and what are the best ways to store data efficiently.

<! Start of the snippet -->

        import React from 'react';
        import './App.css';
        import Search from './components/Search';
        import FormInput from './components/FormInput';
        import Show from './components/Show';
        import {Container, Row, Col} from 'react-bootstrap';


        class App extends React.Component {

          userData;
          state = {
            
              movieName: '',
              ratings: '',
              duration: ''
            
          }

          

          handleMovieName = (e) =>{
            this.setState({movieName: e.target.value})
          }
          handleRatings = (e) => {
            this.setState({ratings: e.target.value})
          }
          handleDuration = (e) => {
            this.setState({duration: e.target.value})
          }
          handleSubmit = (e) => {
            console.log(`${this.state.movieName} ${this.state.ratings} ${this.state.duration}`);
            e.preventDefault();
          componentDidMount(){
            this.userData = JSON.parse(localStorage.getItem('user'));

            if(localStorage.getItem('user')){
              this.setState({
                movieName: this.userData.movieName,
                ratings: this.userData.ratings,
                duration: this.userData.duration
              })
            } else{
              this.setState({
                movieName: '',
                ratings: '',
                duration: ''
              })
            }
          }

          componentWillUpdate(nextProps, nextState){
            localStorage.setItem('movieName', JSON.stringify(nextState));
          }

        render() {
          return (
            <div>
              <header><h1>Netflix Movie Directory</h1></header>

                <main>
                <Search />
                <Container className="container1">
                  <Row noGutters="true">
                    <Col xs={12} md={8}>
                      <Show 
                        handleDuration = {this.state.duration}
                        handleRatings = {this.state.ratings}
                        handleMovieName = {this.state.movieName} />
                    </Col>
                    <Col xs={6} md={4}>
                      <FormInput 
                        handleSubmit={this.handleSubmit} 
                        handleDuration = {this.handleDuration}
                        handleRatings = {this.handleRatings}
                        handleMovieName = {this.handleMovieName} />
                    </Col>
                  </Row>
                </Container>
          
                </main>
            </div>
          );
         }
        }

        export default App;


    <!-- end snippet --> 

Answer 1

It seems very likely that the bug comes from a mismatch in localStorage keys.

You never set user key in localStorage but if it is not present, you reset component's state which triggers componentWillUpdate which will re-write info stored in local storage under movieName key.
So, probably you want to read movieName instead of user from local storage like this:

componentDidMount(){
  const maybeMovieInfo = JSON.parse(localStorage.getItem('movieName'));

  if(localStorage.getItem('movieName')){
    this.setState({
      movieName: maybeMovieInfo.movieName,
      ratings: maybeMovieInfo.ratings,
      duration: maybeMovieInfo.duration
    })
  } else{
    this.setState({
      movieName: '',
      ratings: '',
      duration: ''
    })
  }
}

Generally speaking, storing information of this type in local storage is a perfectly valid use case.

Answer 2

I wonder why you need to use componentWillUpdate. It is marked as unsafe so try to avoid it. It is mentioned clearly in the docs: https://reactjs.org/docs/react-component.html#updating So I suggest to remove this:

componentWillUpdate(nextProps, nextState){
            localStorage.setItem('movieName', JSON.stringify(nextState));
          }

instead do the store update logic in your handleSubmit

handleSubmit = (e) => {
            console.log(`${this.state.movieName} ${this.state.ratings} ${this.state.duration}`);
            localStorage.setItem('movieName', JSON.stringify(nextState));

        e.preventDefault();}