Any ideas on what is wrong with this javascript code?

I have the code below. The purpose of the code is to grab all the values stored in the local storage an开发者_运维知识库d display them in two HTML elements with ids of 'title' and 'textLoc'. 'title' is an <input type="text"> and 'textLoc' is a <textarea>. I want the values to be stored in the <textarea> and the keys to be stored in the <input type="text">. The values are being stored correctly but the keys are not. Any ideas on why this would be?

var tests = [];
var titles = [];

var finalTests = "";

var key, value;
for (var i = 0; i < localStorage.length; i++) {
  key = localStorage.key(i);
  value = localStorage.getItem(key);
  tests.push(value);
  titles.push(key);
  finalTests += "<tr><td><a class=\"dashlinks\" href=\"javascript:void\" onclick=\"rememberTest("+i+")\">" + key + "</a></td></tr>";
}

for (i=0; i<tests.length; i++) {
document.getElementById('title').innerHTML = titles[i];

document.getElementById('textLoc').innerHTML = tests[i];
}

You should use document.getElementById('title').value and document.getElementById('textLoc').value. Also it seems like you are doing nothing with finalTests after you store it.

You should be appending the string to the text area:

document.getElementById('title').innerHTML = document.getElementById('title').innerHTML + titles[i] + '\n';