Saving data from a Chrome extension - google-chrome

Question

I am trying to create a Chrome extension that looks like the image below.
I want to save the Name and Id when clicking "+" button and I want to load all saved data int the onLoad event as seen in the upper section of image. I would also like to delete a particular row of data when clicking corresponding delete button.
Saved data should persist when closing Chrome.
document.body.onload = function() {
chrome.storage.sync.get(["id","name"], function(items) {
if (!chrome.runtime.error) {
console.log(items);
document.getElementById("lsid").innerText = items.id;
document.getElementById("lsname").innerText = items.name;
}
});
}
document.getElementById("set").onclick = function() {
var d = document.getElementById("name").value;
var x = document.getElementById("id").value;
d=String(d);
chrome.storage.sync.set({"name":d,"id" : x}, function() {
if (chrome.runtime.error) {
console.log("Runtime error.");
}
});
window.close();
}

Answer 1

document.body.onload = function Load() {
for(var i=0;i<localStorage.length;i++){
var row = document.createElement("TR");
var col1 = document.createElement("TD");
var col2 = document.createElement("TD");
var col3 = document.createElement("TD");
var del = document.createElement("BUTTON");
var id=localStorage.key(i);
col1.innerHTML=localStorage.getItem(id);
col2.innerHTML=id;
del.innerHTML="delete";
del.id=id;
del.className ="delete";
col3.appendChild(del);
row.appendChild(col1);
row.appendChild(col2);
document.getElementById("list_table").appendChild(row);
}
}
document.form_save.onsubmit = function() {
var newName = document.form_save.name.value;
var newId = document.form_save.id.value;
window.localStorage.setItem(newId, newName);
location.reload();
}
document.getElementById("list_table").onclick=function(e){
if(e.target.className=="delete"){
var result = confirm("Want to delete?");
if (result) {
window.localStorage.removeItem(e.target.id);
location.reload();
}
}
}