I have a couple of test pages to save a form field’s content to localStorage, then retrieve it on another page’s form textarea field upon clicking a button. Well, clicking on the button on the second page shows the other field’s content only momentarily. Why doesn’t the content remain in the field?
This is for Safari and Chrome browsers. Will be used in iPhone coding context. Chrome does not report any errors on either page.
Below are the two HTML pages, stripped to their essentials. You would type content in the first page and hit “setItem” button. Then tap on “export” to go to page 2. On page 2 tap on the “prepare for export” button to see the content in the previous page, momentarily of course.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function setItemForm1b() {
SOneDateFrom = document.getElementById('SOneDateFrom');
localStorage.setItem('SOneDateFrom', JSON.stringify(SOneDateFrom.value));
}
function getItemForm1b() {
SOneDateFrom = localStorage.getItem('SOneDateFrom');
form1b.SOneDateFrom.value = JSON.parse(SOneDateFrom);
}
function deleteStorage() {
form1b.SOneDateFrom.value = localStorage.setItem('SOneDateFrom',"");
if (form1b.SOneDateFrom.value === "undefined") {
form1b.SOneDateFrom.value = "";
}
}
</script>
</head>
<body onload="getItemForm1b()">
<form name="form1b">
<button onclick="setItemForm1b()">setItem</button>
<a href="baseExport2.html"><button>export</button></a>
<input type="text" name="SOneDateFrom" id="SOneDateFrom">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function exportForm1b() {
var SOneDateFrom = localStorage.getItem('SOneDateFrom'); // put value into variable
form1a.setupSOneSummary.value += "---EVENT---"; // add heading to summary textarea
form1a.setupSOneSummary.value += "\
Date From: " + JSON.parse(SOneDateFrom);
}
</script>
</head>
<body>
<form name="form1a">
<a href="baseInput2.html"><button>return</button></a>
<button onclick="exportForm1b()">prepare to export</button>
<br>
Export:<br><textarea name="setupSOneSummary" id="setupSOneSummary" cols="20" rows="10" wrap="hard" placeholder="boo"></textarea>
</form>
</body>
</html>