SO52798983

<!doctype html>

<html>

<head>
	<link rel="stylesheet" href="lib/style.css">
</head>

<body>
	<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>
  </body>
</html>

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;
}

/*
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`
}

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
  </head>

  <body>
    <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>
  </body>
</html>