如何将图像保存到 localStorage 并在下一页显示？
什么是本地存储？
localStorage 是默认情况下可用于所有现代 Web 浏览器的 Web API。它允许网站在浏览器中存储最少量的数据，这些数据可以在未来的浏览器会话中使用。 localStorage 与 sessionStorage 类似，只是 localStorage 没有到期日期。
本地存储的优势
- 与基于 cookie 的数据存储相比，可以存储大量数据（通常为 2MB – 10MB）
- 只要在域上使用相同的协议，数据就会保留在浏览器中，以便在未来的浏览器会话中使用。
- 数据不需要与每个req和res对象一起传递。
为什么选择本地存储？
- 当网络连接不佳时，尝试使用假后端。
- 当需要多次填写时，跨会话保存一些默认数据，如表单数据（名字、地址等）。
句法：
window.localStorage // It returns a Storage ObjectlocalStorage的方法：
- setItem(key, value) ：用于将数据保存到 localStorage。
- removeItem(key) ：用于从 localStorage 中删除数据。
- getItem(key)：从 localStorage 读取数据。
- clear() ：它清除 localStorage（在域上）。
将数据保存到 localStorage 的语法：
localStorage.setItem(key, value)
Ex: localStorage.setItem("firstName", "Mark Zuker berg");从 localStorage 读取数据的语法：
localStorage.getItem(key)
// Returns the string "Mark Zuker berg"
Ex: localStorage.getItem("firstName");从 localStorage 中删除数据的语法：
localStorage.removeItem(key)
Ex: localStorage.removeItem("firstName");我们已经了解了有关 localStorage 所需的基础知识。让我们用一个例子来实现上面的方法。
先决条件：
- React 的基础知识。
- 任何代码编辑器。
示例：我们将实现一个名为 Pics Villa 的小型图片发布平台，有两个网页：
1. 发布表单：接受用户的输入。它需要以下输入：
- 帖子标题：我们帖子的标题，为字符串类型。
- 图片网址：图片的网址。它可以是存储在 Google 云或您选择的任何其他服务中的图像的公共链接。但是，对于此示例，所有图像都上传到 Github，并使用了下载链接。在这种情况下，图像 url 可能类似于以下格式： https://raw.githubusercontent.com/
/ / - 发表评论：它是一个多行字符串。
2. 所有帖子：显示用户输入的表单数据。
创建应用程序的步骤：
1. 使用以下命令创建您的应用程序：
npx create-react-app crud-application2. 上面的命令为我们创建了一个包含所有必需样板的 React 项目。让我们通过输入以下命令进入项目的src文件夹：
cd crud-application/src3.您可以删除一些不必要的文件（可选步骤）：
rm App.css App.test.js logo.svg4. 允许网页路由。安装以下模块：
npm i react-router-dom5. 检查您的package.json以匹配以下依赖项：
"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)
},文件名：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 (
);
}
}
export default App;Javascript
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(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 (
Pics
Villa
One place stop for all kinds of images
Create a new Post