Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Im pretty sure when using setItem, you need to set items using a (key, value) pair.</p> <p>See this page as reference: <a href="http://en.wikipedia.org/wiki/Web_storage#localStorage" rel="nofollow">http://en.wikipedia.org/wiki/Web_storage#localStorage</a></p> <p>Try this:</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;/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; &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', duck); localStorage.setItem('duckie', duckie); localStorage.setItem('rubberDuck', rubberDuck); localStorage.setItem('rubberDuckie', rubberDuckie); checkLocalStorage(); } function checkLocalStorage() { var div = document.getElementById("storageDiv"); div.innerHTML = localStorage["duck"] + localStorage["duckie"] + localStorage["rubberDuck"] + localStorage["rubberDuckie"]; } checkLocalStorage(); &lt;/script&gt; </code></pre> <p>Also, I put the script below the html so it is ran after the html. I also added an immediate call to checkLocalStorage (last line of script).</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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