Databases
StackOverflow2013
Postsdbo
POAdding Values through local storage
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdding Values through local storage
    text
    copied!<p>I'm trying to make a page where the user can input data into four different values in four different text boxes, and the values can be stored by using local storage, and then when the user refreshes the page or opens it in a new tab, those previously entered values are still there. Any advice on how to do this would be really great! Here's the code that I have currently:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;Storing Data&lt;/title&gt; &lt;meta name="description" content="" /&gt; &lt;meta name="author" content="Alan Sylvestre" /&gt; &lt;style&gt; h1 { background-color: #000000; color: #C00000; padding: 10 px; padding: 10 px; text-align: center; } &lt;/style&gt; &lt;script&gt; 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, duckie, rubberDuck, rubberDuckie); checkLocalStorage(); } function checkLocalStorage() { var div = document.getElementById("storageDiv"); div.innerHTML = localStorage["duck", "duckie", "rubberDuck", "rubberDuckie"]; } &lt;/script&gt; &lt;/head&gt; &lt;body align="center" style="background-color:red;"&gt; &lt;div&gt; &lt;header&gt; &lt;h1&gt;Local Storage&lt;/h1&gt; &lt;/header&gt; &lt;input type="text" id="storage1" size="40" placeholder="Please enter a value"&gt; &lt;input type="text" id="storage2" size="40" placeholder="Please enter a value"&gt; &lt;input type="text" id="storage3" size="40" placeholder="Please enter a value"&gt; &lt;input type="text" id="storage4" size="40" placeholder="Please enter a value"&gt; &lt;br&gt; &lt;br&gt; &lt;input type="button" id="addValue" value="Store Input Values" onclick='storageValue();'&gt; &lt;div id="storageDiv"&gt;&lt;/div&gt; &lt;nav&gt; &lt;p&gt; &lt;a href="/"&gt;Home&lt;/a&gt; &lt;/p&gt; &lt;p&gt; &lt;a href="/contact"&gt;Contact&lt;/a&gt; &lt;/p&gt; &lt;/nav&gt; &lt;div&gt; &lt;/div&gt; &lt;footer&gt; &lt;p&gt; &amp;copy; Copyright by Alan Sylvestre &lt;/p&gt; &lt;/footer&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload