I need to store the values that the user enters in each of the boxes through html5. When the user refreshes the page, it should keep the values in each of the text boxes. I had a friend tell me that this would work, but it's not and I'm not getting any errors in the console.
<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').value poodle.innerHTML = localStorage["duck"] var cow = document.getElementById('storage2').value poodle.innerHTML = localStorage["duckie"] var dog = document.getElementById('storage3').value dog.innerHTML = localStorage["rubberDuck"] var cat = document.getElementById('storage4').value cat.innerHTML = localStorage["rubberDuckie"];}checkLocalStorage(); Here's the HTML that I have:
<body align="center" style="background-color:red;"><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><footer><p>© Copyright by Alan Sylvestre</p></footer></div></body>
