How to Keep User Input From One HTML Page to Another Using JavaScript

Question

I am attempting to keep user input from one page to another. Simplified, what I want to do is as follows:

PAGE 1:

  var userInput = prompt("What is your name");

Page 2:

  document.getElementById("userName").innerHTML = userInput;

The user enters their name, and clicks a link to the next page, where their name is displayed. I cannot figure out a good way to keep the data from one page to another. (I do not know how to store data using cookies).

Depending your browser capabilities restrictions, you could take advantage of local storage to store input values on the client side. — Sir McPotato, Feb 27 '17 at 14:08
@SirMcPotato Could you put that in beginners terms please? ;) — , Feb 27 '17 at 14:09
If you're planning to support mostly the most advanced browsers (Chrome, Firefox, etc), take a look at Local Storage : https://developer.mozilla.org/en/docs/Web/API/Window/localStorage It's a client-side storage who allow to keep some data without having to tweak with cookies ;) — Sir McPotato, Feb 27 '17 at 14:11

score 1 · Accepted Answer · answered Feb 27 '17 at 14:12

1

Like Sir McPotato suggested you could use Local Store to achieve this:

// Store
localStorage.setItem("Name", "What is your name");
// Retrieve
document.getElementById("userName").innerHTML = localStorage.getItem("Name");

answered Feb 27 '17 at 14:12

Toxide82

277
1
7

score 0 · Answer 2 · answered Feb 27 '17 at 14:12

You can use HTML5 local storage. Store the value returned by the prompt() in the browser's local storage and then retrieve it in the next page:

Page 1:

var userinput = prompt("What is your name?");
if (localStorage.getItem("uinput") {
  localStorage.removeItem("uinput");
} else {
  localStorage.setItem("uinput",userinput);
}

Page 2:

var userinput = localStorage.getItem("uinput");

score 0 · Answer 3 · answered Feb 27 '17 at 14:12

you can pass the data using a querystring so on your link to page 2 you would add the data for example

page2.html?username=Me

then you can read these query string parameters by different methods depending on what framework you are using.

if this isn't enough to get you going, if you provide info on how you navigating from page 1 to the other and can provide more.

How to Keep User Input From One HTML Page to Another Using JavaScript

3 Answers3