Trabajando en un proyecto simple usando reaccionar js. Lo que estoy tratando de hacer es guardar el "elemento" (que tiene un campo de entrada para que el usuario lo coloque) en el almacenamiento local, con el propósito de que cuando un usuario vuelva a cargar o navegue a otros componentes, el elemento no desaparecerá , pero estará allí.

AddItem.js:

 export default class AddItem extends React.Component { userItems; constructor(props) { super(props); this.state = { content: "", items: [], }; } update(event) { this.setState({ message: event.target.value, }); } componentDidMount() { this.userItems = JSON.parse(localStorage.getItem('items')); if (localStorage.getItem('items')){ this.setState({ items: this.userItems.items, message: this.userItems.message }) }else { this.setState({ items: [], message: "" }) } } componentWillUpdate(nextProps, nextState){ localStorage.setItem('item', JSON.stringify(nextState)); } handleClick() { var items = this.state.items; items.push(this.state.message); this.setState({ items: items, content: "", }); } handleChanged(j, event) { let items = this.state.items; items[j] = event.target.value; this.setState({ items: items, }); }

El problema es que cuando escribo un elemento en el campo de entrada y vuelvo a cargar la página, el componente no se muestra en absoluto.

En la aplicación, en el almacenamiento local, el valor se muestra en la inspección de Google:

Pero tan pronto como navego a otro componente o vuelvo a cargar esa página, el almacenamiento se vacía como la primera vez. ¿Cómo puedo hacer que funcione, para que el valor no desaparezca cuando navego a otra página?