Access user input value saved on one page on another page using javascript

Question

I am trying to get the user input value from one page, on another page, for example, On my HTML page1 I have:-

<input type="text" id="someName" placeholder="enter name"/>
<input type="submit" id="submitBtn" value="submit">

and in the script, I have:-

let Btn = document.querySelector('#submitBtn');
Btn.onclick = function() {
    let name = document.querySelector('#someName').value;
}

Now what I'm trying to do is access the name variable (which carries the user inputted value), from other HTML pages (not the page that input was entered). I understand that this is where database comes in to store values, but without knowledge of using db, I was wondering if there's workaround with just client-side Javascript.

Answer 1

You can use Javascript's document.cookie to read and write cookie data, which can persist between page loads.

Btn.onclick = function() {
    let name = document.querySelector('#someName').value;
    document.cookie = name;
}

To retrieve the name on another page:

let name = document.cookie;

This gets more complicated when you want to store multiple items in the cookie. Fortunately this has already been answered: How do I create and read a value from cookie?

Answer 2

Domains and Web Storage

Web Storage is shared on every page of a domain. So if you save data to localStorage or sessionStorage you can get the same data from the same web storage on a different page as long as it's on the same domain (that includes the subdomain as well, see examples below).

Example of pages on the same domain:

• https://www.example.com/index.html and https://www.example.com/page1.html share the same web storage.

---

Example of pages NOT on the same domain:

• https://www.example.com/index.html and https://stackoverflow.com/ do not share the same web storage.

• https://app.example.com/index.html and https://www.example.com/page1.html do not share the same web storage.

---

Explanation

The following demo is not functional due to SO security measures, review this Plunker instead. The demo has:

• 2 pages: index.html and page.html.

• On index.html the <form> will not send data to a server and reset the page when the submit event occurs. The data will be saved to localStorage.

• There is an <iframe> to page1.html. It has a link so you can jump directly to it and it has a Get Data button. The button is clickable from the <iframe> as well as when you are on the page itself. Once clicked, it will retrieve the data from localStorage thus proving that web storage is shared between pages that share the same domain.

• The collection and referencing of the <form> and its form controls are made possible by the HTMLFormControlsCollection API.

---

Demo

Plunker

Details are commented in demo.
Note: Snippet does not function, review the Plunker instead.

/*
The following declarations are done by using the
HTMLFormControlsCollection API
*/
// Exists on both pages
var form = document.forms[0];
// NodeList of all of the form controls
var ui = form.elements;
// <input> on index.html
var data = ui.data;
// Exists on both pages
var out = ui.out;
// Button on page1.html
var btn = ui.btn;

// Register the 'submit' event on the <form>
form.addEventListener('submit', saveData);

// Register the 'click' event on the button on page1.html
btn.addEventListener('click', getData);

// Callback called on submit on index.html
function saveData(e) {

  /* 
  Prevent the <form> from sending data to server and
  resetting itself
  */
  e.preventDefault();

  // Get the data from <input> on index.html
  var str = data.value;

  // Save data to localStorage
  localStorage.setItem('data', JSON.stringify(str));

  // Notify user
  out.innerHTML = `<i><b>"${str}"</b></i> is stored in localStorage under the key of "data"`;
}

// Callback called when button is clicked on page1.html
function getData(e) {

  // Get data from localStorage
  var stored = JSON.parse(localStorage.getItem('data'));

  // Notify user
  out.innerHTML = `<i><b>"${stored}"</b></i> has been retrieved from localStorage`
}

html {
  font: 400 16px/1.5 Consolas;
}

body {
  font-size: 1rem;
}

label,
input,
output {
  font: inherit;
  display: inline- block;
}

fieldset {
  width: fit-content;
}

.title {
  font-size: 1.1rem;
}

.red {
  color: tomato;
}

#out {
  display: table-cell;
  min-width: 260px;
  padding: 5px;
  height: 24px;
}

legend,
label,
[type='button'] {
  font-variant: small-caps;
}

iframe {
  display: block;
  overflow: scroll;
}

<!--index.html-->

<form id='ui'>
  <fieldset>
    <legend class='title'>Data Share</legend>
    <label for='data'>Data: </label>
    <input id='data' name='data' value='default string'>
    <input type='submit'><br>
    <output id='out' for='data'></output>
  </fieldset>
</form>
<p>Below is an iframe to a separate page.</p>
<iframe src='page1.html'></iframe>
<script src="lib/script.js"></script>

<!--page1.html-->

<form id='ui'>
  <fieldset>
    <legend class='title'><b><a href='page1.html' target='_blank' class='red'>Page 1</a></b></legend>
    <input id='btn' type='button' value='Get Data'>
    <output id='out'></output>
  </fieldset>
</form>

<script src="lib/script.js"></script>