从Chrome扩展程序保存数据

Question

我正在尝试创建一个类似下图的Chrome扩展程序。

我想在点击“+​​”按钮时保存名称和ID，我想在onLoad事件中加载所有已保存的数据，如图像的上半部分所示。我还想在单击相应的删除按钮时删除特定的数据行。

关闭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();
        }
    }
}