¿Cómo guardar una imagen en localStorage y mostrarla en la página siguiente?

¿Qué es el almacenamiento local?

LocalStorage es una API web disponible para todos los navegadores web modernos de forma predeterminada. Permite que los sitios web almacenen una cantidad mínima de datos en el navegador que se pueden usar en futuras sesiones del navegador. localStorage es similar a sessionStorage excepto que localStorage no tiene fecha de vencimiento.

Ventajas del almacenamiento local

• Puede almacenar una gran cantidad de datos en comparación con el almacenamiento de datos basado en cookies (normalmente de 2 MB a 10 MB)
• Los datos persisten en el navegador para ser utilizados en futuras sesiones del navegador siempre que se utilice el mismo protocolo en el dominio.
• No es necesario pasar datos con cada objeto req y res .

¿Por qué almacenamiento local?

• Experimente con un back-end falso cuando la conexión de red sea deficiente.
• Guardar algunos datos predeterminados en las sesiones, como los datos del formulario (nombre, dirección, etc.) cuando es necesario completarlos varias veces.

Sintaxis:

window.localStorage   // It returns a Storage Object

Métodos de almacenamiento local:

1. setItem (clave, valor) : se utiliza para guardar datos en localStorage.
2. removeItem(key) : Se utiliza para eliminar datos de localStorage.
3. getItem (clave): lee datos de localStorage.
4. clear() : Borra localStorage (en el dominio).

Sintaxis para guardar datos en localStorage:

localStorage.setItem(key, value)
Ex: localStorage.setItem("firstName", "Mark Zuker berg");

Sintaxis para leer datos de localStorage:

localStorage.getItem(key)

// Returns the string "Mark Zuker berg"
Ex: localStorage.getItem("firstName");

Sintaxis para eliminar datos de localStorage:

localStorage.removeItem(key)
Ex: localStorage.removeItem("firstName");

Hemos aprendido los conceptos básicos necesarios sobre localStorage. Implementemos los métodos anteriores con un ejemplo.

requisitos previos: 

1. Conocimientos básicos de React.
2. Cualquier editor de código.

Ejemplo: Implementaremos una pequeña plataforma de publicación de imágenes llamada Pics Villa, con dos páginas web:

1. Formulario de publicación: toma la entrada del usuario. Toma la siguiente entrada:

• Título de la publicación: el título de nuestra publicación y es de tipo string.
• URL de la imagen : URL de la imagen. Puede ser el enlace público de la imagen almacenada en la nube de Google o cualquier otro servicio de su elección. Sin embargo, para este ejemplo, todas las imágenes se suben a Github y se usa el enlace para descargar. En este caso, la URL de la imagen puede tener un formato similar al siguiente: https://raw.githubusercontent.com/<your username>/<your repo name>/<actual-image-path>
• Publicar comentario: Es una string de varias líneas.

2. Todas las Publicaciones: Muestra los datos del formulario ingresados ​​por el Usuario.

Pasos para crear tu aplicación:

1. Crea tu aplicación usando el siguiente comando:

npx create-react-app crud-application

2. El comando anterior crea un proyecto React para nosotros con todo el modelo requerido. Ingresemos a la carpeta src del proyecto escribiendo el siguiente comando:

cd crud-application/src

3. Puede eliminar algunos archivos innecesarios (paso opcional):

rm App.css App.test.js logo.svg

4. Para permitir el enrutamiento de páginas web. Instale el siguiente módulo:

npm i react-router-dom

5. Verifique su paquete.json para que coincida con las siguientes dependencias:

"dependencies": {
    .......................
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4",
    .....................
    // Other dependencies (if any)
  },

Nombre de archivo: App.js

import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } 
        from 'react-router-dom';
import PostForm from './PostForm';
import AllPost from './AllPost';
  
class App extends Component {
  render() {
    return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path ='/' render=
            {props => <PostForm {...props} />}>
          </Route>
          <Route exact path='/gallery' render=
            {props => <AllPost {...props} />}>
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
    );
    }
  }
export default App;

Nombre de archivo: Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
  
ReactDOM.render(<App /> , document.getElementById('root'));

Nombre de archivo: PostForm.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
  
const galleryStyle ={
  border: 'none',
  margin: 0,
  color: '#fff',
  fontWeight: 'bold',
  padding: '16px 20px',
  position: 'absolute',
  top: '35px',
  right: '200px',
  background: '#7bc74d',
}
const postBtnStyle = {
  border: 'none',
  margin: 0,
  color: '#fff',
  fontWeight: 'bold',
  padding: '16px 20px',
  background: '#7D4C92 ',
  width: '417px',
}
const parentDiv = {
  align: 'center',
  margin: '0px auto auto auto',
  textAlign: 'center',
}
const formStyle = {
  width: '400px',
  border: '1px solid lightgray',
  margin: '10px auto 10px auto',
  textAlign: 'center',
  padding: '30px 40px 30px 40px',
}
const inputFields = {
  width: 'inherit',
  fontFamily: 'arial',
  padding: '6px',
}
  
class PostForm extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    const title = this.getTitle.value;
    const message = this.getMessage.value;
    const image = this.getImage.value;
    localStorage.setItem('title', title);
    localStorage.setItem('message', message);
    localStorage.setItem('image', image);
    this.getTitle.value='';
    this.getMessage.value = '';
    this.getImage.value = '';
  }
render() {
  return (
    <div style={parentDiv}>
    <h1 style={{color:'#8A2482'}}>Pics
      <span style={{color:'#248A6E'}}>Villa</span>
    </h1>
      
<p>One place stop for all kinds of images</p>
  
    <hr></hr>
      <h3>Create a new Post</h3>
      <form onSubmit={this.handleSubmit} style={formStyle}>
         <input style={inputFields} required type="text" 
         placeholder="Enter Post Title" 
          ref={(input)=> this.getTitle = input }
         /><br /><br />
         <input style={inputFields} required type="text" 
         placeholder="Paste your image url here"
         ref={(input) => this.getImage = input}
         /><br></br>
         <br></br>
         <textarea style={inputFields} 
           required rows="5" cols="28" 
  
         placeholder="Enter Comment" 
           ref={(input)=>this.getMessage = input}/>
         <br /><br />
         <button style={postBtnStyle}>Post</button>
      </form>
      <Link to='/gallery'>
        <button style={galleryStyle}>
          View Gallery
        </button>
      </Link>
    </div>
   );
}
}
export default PostForm;

Nombre de archivo: AllPost.js

import React, { Component } from 'react';
import Post from './Post';
  
const parentDiv = {
  align: 'center',
  margin: '0px auto auto auto',
  textAlign: 'center',
}
  
class AllPost extends Component {
  render() {
    return (
    <div style={parentDiv}>
     <h1 style={{color:'#8A2482'}}>Pics <span 
       style={{color: '#248A6E'}}>Villa</span>
     </h1>
      
    <p>One place stop for all kinds of images</p>
  
    <hr></hr>
      <h1>All Posts</h1>
      <Post/>
    </div>
    );
   }
}
  
export default AllPost;

Nombre de archivo: Post.js

import React, { Component } from 'react';
  
class Post extends Component {
  render() {
  return (
    <div
      style={{ width: '50%', margin: '0px auto' }}
    >
      <h2>{localStorage.getItem('title')}</h2>
      <img src={localStorage.getItem('image')} 
      alt={'C - language'}
      />
      <p style={{width: '50%', margin: '0px auto'}}
      >{localStorage.getItem('message')}</p>
  
    </div>
  );
 }
}
export default Post;

Ejecute la aplicación usando el siguiente comando:

npm start

Después de iniciar el servidor, verá el siguiente resultado en su pantalla:

Ingrese algunos datos en el formulario y haga clic en Ver galería para ver la imagen cargada como se muestra a continuación: