storing and loading input data in localStorage step by step

Question

I am trying to use localStorage to store some input data.
This is what I came up with and no it does not work.
Can someone explain to me how I can get this to work?
I have searched for tutorials but I find it hard to understand how to store and retrieve the data from the localStorage.

This is my script:

  <body onLoad="get();">

   <article id="hldr">
      <input type="text" id="kID" class="regTXTBOX" placeholder="office ID">
      <input type="text" id="gID" class="regTXTBOX" placeholder="user ID">
      <button id="save" onClick="store();" style="margin-bottom:20px;">save data</button>
      <button id="login" onClick="store();">log-in</button>
    </article>
  <span id="1"></span>
  <span id="2"></span>
</p>
<script type="text/javascript">
function store(){
    var kid = document.getElementById("kID");
    localStorage.setItem("kidStore", kid.value);
}
function get(){
    var one = document.getElementById('1').value
    one = localStorage.getItem("kidStore");
}
</script>
  </body>

I want it to fire when the page loads, although I probably don't even need the onLoad function for that. I also don't really need the button to save the data but I just put it in for testing.
If someone can provide me a step-by-step explanation to get this to work I would be very happy.

Answer 1

Your problem is that the span element does not have a value property. So changing it to innerText will make it work (along with the assigning problem which I mentioned in the comments).

The following will work:

document.getElementById('1').innerText = localStorage.getItem("kidStore");

Working fiddle: http://jsfiddle.net/k6r53/

storing and loading input data in localStorage step by step

Question

1 answers

solution1
2 ACCPTED 2014-01-29 09:51:04

storing and loading input data in localStorage step by step

Question

1 answers

solution1 2 ACCPTED 2014-01-29 09:51:04

solution1
2 ACCPTED 2014-01-29 09:51:04