JSFiddle - React, Tailwind, and code Playground
by ian_smithz
HTML
<div>
<header>
<h1>Local Storage</h1>
</header>
<input type="text" id="storage1" size="40" placeholder="Please enter a value">
<input type="text" id="storage2" size="40" placeholder="Please enter a value">
<input type="text" id="storage3" size="40" placeholder="Please enter a value">
<input type="text" id="storage4" size="40" placeholder="Please enter a value">
<br>
<br>
<input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'>
<div id="storageDiv"></div>
<nav>
<p>
<a href="/">Home</a>
</p>
<p>
<a href="/contact">Contact</a>
</p>
</nav>
<div>
</div>
</div>
<script>
function storageValue() {
var uno = document.getElementById("storage1");
var duck = uno.value
var dos = document.getElementById("storage2");
var duckie = dos.value
var tres = document.getElementById("storage3");
var rubberDuck = tres.value
var quatro = document.getElementById("storage4");
var rubberDuckie = quatro.value
alert("Your stored values are: " + duck + "," + duckie + "," + rubberDuck + "," + rubberDuckie);
localStorage.setItem('duck', duck);
localStorage.setItem('duckie', duckie);
localStorage.setItem('rubberDuck', rubberDuck);
localStorage.setItem('rubberDuckie', rubberDuckie);
checkLocalStorage();
}
function checkLocalStorage() {
var poodle = document.getElementById('storage1')
poodle.value = localStorage["duck"]
var cow = document.getElementById('storage2')
cow.value = localStorage["duckie"]
var dog = document.getElementById('storage3')
dog.value = localStorage["rubberDuck"]
var cat = document.getElementById('storage4')
cat.value = localStorage["rubberDuckie"];
}
checkLocalStorage(); </script>