Как сохранить изображение в localStorage и отобразить его на следующей странице?

Опубликовано: 30 Ноября, 2021

Что такое localStorage?

LocalStorage - это веб-API, доступный по умолчанию для всех современных веб-браузеров. Это позволяет веб-сайтам хранить в браузере минимальный объем данных, которые можно использовать в будущих сессиях браузера. localStorage похож на sessionStorage, за исключением того, что у localStorage нет даты истечения срока действия.

Преимущества localStorage

Может хранить большой объем данных по сравнению с хранилищем данных на основе файлов cookie (обычно 2–10 МБ)
Данные сохраняются в браузере для использования в будущих сеансах браузера, пока используется тот же протокол в домене.
Данные не нужно передавать с каждым объектом req и res.

Почему именно localStorage?

Поэкспериментируйте с поддельной серверной частью при плохом сетевом соединении.
Сохранение некоторых данных по умолчанию в сеансах, таких как данные формы (имя, адрес и т. Д.), Когда их нужно заполнять несколько раз.

Синтаксис:

window.localStorage // Возвращает объект хранилища

Методы localStorage:

setItem (ключ, значение) : используется для сохранения данных в localStorage.
removeItem (ключ) : используется для удаления данных из localStorage.
getItem (key): он читает данные из localStorage.
clear () : очищает localStorage (в домене).

Синтаксис для сохранения данных в localStorage:

 localStorage.setItem ( ключ , значение )
Пример: localStorage.setItem ("firstName", "Марк Цукер Берг");

Синтаксис для чтения данных из localStorage:

 localStorage.getItem ( ключ )

// Возвращает строку «Марк Цукер Берг»
Пример: localStorage.getItem ("firstName");

Синтаксис для удаления данных из localStorage:

 localStorage.removeItem ( ключ )
Пример: localStorage.removeItem ("firstName");

Мы изучили необходимые основы работы с localStorage. Реализуем описанные выше методы на примере.

Предпосылки:

Базовые знания React.
Любой редактор кода.

Пример: мы реализуем небольшую платформу для размещения изображений под названием Pics Villa с двумя веб-страницами:

1. Форма сообщения: принимает данные от пользователя. Требуется следующий ввод:

Заголовок сообщения: заголовок нашего сообщения строкового типа.
URL- адрес изображения: URL-адрес изображения. Это может быть общедоступная ссылка на изображение, хранящееся в облаке Google, или любой другой сервис по вашему выбору. Однако в этом примере все изображения загружаются на Github и используется ссылка для загрузки. В этом случае URL-адрес изображения может выглядеть примерно в следующем формате: https://raw.githubusercontent.com/<ваше имя пользователя> / <имя вашего репо> / <actual-image-path>
Комментарий к сообщению: Это многострочная строка.

2. Все сообщения: отображает данные формы, введенные пользователем.

Шаги по созданию вашего приложения:

1. Создайте свое приложение, используя следующую команду:

 npx создать-реагировать-приложение crud-приложение

2. Приведенная выше команда создает для нас проект React со всем необходимым шаблоном. Давайте войдем в папку src проекта, набрав следующую команду:

 cd crud-application / src

3. Вы можете удалить ненужные файлы (необязательный шаг):

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

4. Разрешить маршрутизацию веб-страниц. Установите следующий модуль:

 npm я реагирую-маршрутизатор-дом

5. Убедитесь, что ваш package.json соответствует следующим зависимостям:

 "dependencies": {
    .......................
    "реагировать": "^ 17.0.1",
    "react-dom": "^ 17.0.1",
    "response-router-dom": "^ 5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^ 0.2.4",
    .....................
    // Прочие зависимости (если есть)
  },

Имя файла: App.js

Javascript

 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 App; default 

Имя файла: Index.js

Javascript

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

Имя файла: PostForm.js

Javascript

 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 PostForm; default 

Имя файла: AllPost.js

Javascript

 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; 

Имя файла: Post.js

Javascript

 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 Post; default 

Запустите приложение, используя следующую команду:

 npm start

После запуска сервера вы увидите на экране следующий вывод:

Введите данные в форму и нажмите « Просмотр галереи», чтобы увидеть загруженное изображение, как показано ниже:

Technical Scripter JavaScript Вопросы о Web технологиях React-js Picked

Как сохранить изображение в localStorage и отобразить его на следующей странице?

Javascript

Javascript

Javascript

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ