Store HTML form data to another webpage

I want two webpages in my website in such a way that:

  1. Users can input their data into some textfill/textarea (html form) in webpage-1.

  2. Their data is shown in webpage-2.

**webpage-1:(user page)**

post :
name:....
age:....
roll:...
description:......


**webpage-2:(admin page)**

post no:1
name:....
age:....
roll:...
description:..........

post no:2 
name:....
age:....
roll:...
description:..........

post no:3 
name:...
age:....
roll:...
description:..........

>Solution :

The basic architecture of your website should be something like this. Design both pages and share the data using local storage.

Follow these steps:

  1. Design your User page. Add a form to using which the user can input data related to the post. Use setItem() method of localStorage web api to store posts in an array.
var posts = [];

localStorage.setItem("posts", JSON.stringify(posts));
  1. Design the admin panel where you have to show the data. Fetch the posts array from local storage using getItem() method.
var storedPosts = JSON.parse(localStorage.getItem("posts"));

The data is stored in browser’s permanent memory. This way you won’t lose your posts data while moving from User page to Admin page.

Read this article for a detailed explanation of localStorage along with examples and projects.

Leave a Reply