How to save an image to localStorage and display it on the next page?

What is localStorage?

The localStorage is a Web API available to all modern web browsers by default. It allows websites to store a minimal amount of data in the browser which can be used in future browser sessions. localStorage is similar to sessionStorage except that the localStorage does not have an expiration date.

Advantages of localStorage

• Can store a large amount of data compared to cookie-based storage of data (typically 2MB – 10MB)
• Data persists in the browser to be used across future browser sessions as long as the same protocol on the domain is being used.
• Data need not be passed with each req and res objects.

Why localStorage?

• Experiment with a fake back end when the network connection is poor.
• Saving some default data across sessions like form data ( first name, address, etc) when it needs to be filled multiple times.

Syntax:

window.localStorage   // It returns a Storage Object

Methods of localStorage:

1. setItem(key, value): Used to save data to localStorage.
2. removeItem(key): Used to remove data from localStorage.
3. getItem(key): It read data from localStorage.
4. clear(): It clears localStorage (on the domain).

Syntax to save data to localStorage:

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

Syntax to read data from localStorage:

localStorage.getItem(key)

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

Syntax to remove data from localStorage:

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

We have learned the required basics about localStorage. Let’s implement the above methods with an example.

Prerequisites: 

1. Basic knowledge of React.
2. Any code Editor.

Example: We will implement a small image posting platform called Pics Villa, with two web pages:

1. Post form: Takes the input from the user. It takes the following input:

• Post Title: The title for our post and is of string type.
• Image URL: URL of the image. It can be the public link of the image stored in Google cloud or any other service of your choice. However, for this example, all the images are uploaded to Github and the link to download is used. In this case, the image url may look something like the following format: https://raw.githubusercontent.com/<your username>/<your repo name>/<actual-image-path>
• Post Comment: It is a multi-line string.

2. All Posts: Displays the form data entered by the User.

Steps to create your application:

1. Create your application using the following command:

npx create-react-app crud-application

2. The above command creates a React project for us with all the required boilerplate. Let’s enter into the src folder of the project by typing the below command:

cd crud-application/src

3. You can remove some unnecessary files (Optional step):

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

4. To allow routing of web pages. Install the following module:

npm i react-router-dom

5. Check your package.json to match the following dependencies:

"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)
  },

Filename: App.js

Filename: Index.js

Filename: PostForm.js

Filename: AllPost.js

Filename: Post.js

Run the application using the following command:

npm start

After the server is started, you will see the following output on your screen:

Enter some data into the form and click on View Gallery to see the uploaded image as below: