Access User Input Value Saved On One Page On Another Page Using Javascript

July 29, 2023 Post a Comment

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

Solution 1:

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.htmldo 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 pagesvar form = document.forms[0];
// NodeList of all of the form controlsvar ui = form.elements;
// <input> on index.htmlvar data = ui.data;
// Exists on both pagesvar out = ui.out;
// Button on page1.htmlvar 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.htmlfunctionsaveData(e) {

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

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

  // Save data to localStoragelocalStorage.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.htmlfunctiongetData(e) {

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

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

html {
  font: 40016px/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--><formid='ui'><fieldset><legendclass='title'>Data Share</legend><labelfor='data'>Data: </label><inputid='data'name='data'value='default string'><inputtype='submit'><br><outputid='out'for='data'></output></fieldset></form><p>Below is an iframe to a separate page.</p><iframesrc='page1.html'></iframe><scriptsrc="lib/script.js"></script><!--page1.html--><formid='ui'><fieldset><legendclass='title'><b><ahref='page1.html'target='_blank'class='red'>Page 1</a></b></legend><inputid='btn'type='button'value='Get Data'><outputid='out'></output></fieldset></form><scriptsrc="lib/script.js"></script>

Solution 2:

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?

JavaScript Free