使用带按钮的输入字段动态更新localStorage？

Question

基本上我使用的是madalin（优秀用户）提供的以下代码段，它循环遍历我的localStorage。我有一个系统可以将公司添加到localStorage，我只需要能够在下面显示的代码中更改`sCompanies.name的值。我希望这不是一个太大的问题，谢谢！ :)＆lt; 3

首先，我使用的是另一个用户madalin很久以前发布的代码，我想改编：

<div class="parent">
<select class="form-control" id="ex2" name="key"></select><br>
<input class="form-control" id="ex21" type="text" placeholder="Enter the updated value"><br>
<button type="button" class="btn btn-primary"    onClick="editValue();">Enter</button>
</div>


 for (var i = 0; i < localStorage.length; i++) {
    $('#ex2').append('<option value="'+localStorage.key(i)+'">'+localStorage.key(i)+'</option>');
  };

function editValue() {
   var key = $(this).closest('.parent').find('option:selected').val();
  localStorage.setItem(key,$(this).closest('.parent').find('input[type="text"]').val());
}

我的项目下面对不起大小:(

HTML：

<div id="CompanyDIV">
<h3> Add companies to localStorage here </h3>

<input id="txtCompanyName" type="text" placeholder="company name">
<input id="txtCompanyPrice" type="text" placeholder="company price">
<button id="btnAddCompany">Add Company</button>
<input id="txtSearch" type="text" placeholder="search">
<button id="btnShowHide">Show / Hide</button>

<h3> Update Values in localStorage here </h3>

<div class="parent">
    <select class="form-control" id="ex2" name="key"></select><br>
    <input class="form-control" id="ex21" type="text" placeholder="Enter the updated value"><br>
    <button type="button" class="btn btn-primary"    onClick="editValue()">Enter</button>
</div>

<h3> Data pulled from localStorage</h3>

    <div class="bs-example" data-example-id="hoverable-table"> 
        <table class="table table-hover"> 
            <thead> 
                <tr> 
                    <th>#</th> 
                    <th>Unique ID </th> 
                    <th>Company Name</th> 
                    <th>Company Price</th>
                </tr> 
            </thead> 
            <tbody id="lblCompanies"> 
            </tbody> 
        </table> 
    </div>
</div>
</div>

Jquery / localStorage

 if(localStorage.sCompanies == null){ var aCompanies = new Array();} 
    else{ var serelization = localStorage.getItem("sCompanies"); 
    var aCompanies = JSON.parse(serelization); } 

$("#btnAddCompany").click(function() {
  var sCompanyId = new Date().getTime();
  var sCompanyName = $("#txtCompanyName").val();
  var sCompanyPrice = $("#txtCompanyPrice").val();

  //<!------------------------------ Set interval random company price for all unique id's -->

  setInterval(function() {
    $("#lblCompanies").empty();

    for (var i = 0; i < aCompanies.length; i++) {
      var randomnumber2 = Math.floor(Math.random() * aCompanies[i].price * 10) + 1;
      // negative or positive
      randomnumber2 *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
      aCompanies[i].price = randomnumber2;
      // Updating the row  of companies
      $("#lblCompanies").append('<tr><th scope="row"  class="fa fa-trash-o fa-fw"><td class="id">' + aCompanies[i].id + ' </td></th><td>' + aCompanies[i].name + '</td><td>' + aCompanies[i].price + '</td></tr>');
    }
    // Save it on the localStorage
    localStorage.sCompanies = JSON.stringify(aCompanies);
    //showHideCompanies();

  }, 1000);

  //<!------------------------------ Set interval random company price for all unique id's ------------------------------>

  // jUser or JCompagny take the text value field up in the HTML part
  // jCompany is just an array
  // which will take values added by the user on the html for
  // which then pushes the input field data into the aCompany or aUser array

  var jCompany = {};
  jCompany.id = new Date().getTime();
  jCompany.name = sCompanyName;
  jCompany.price = sCompanyPrice;
  console.log(aCompanies);
  aCompanies.push(jCompany);
  // Save to the localStorage
  //var sFinalCompanies = JSON.stringify( aCompanies );
  // Save/update the sCompanies in localStorage
  localStorage.sCompanies = JSON.stringify(aCompanies);

  //console.log(sFinalCompanies)
});

$("#txtSearch").keyup(function() {
  // console.log("x");
  var sSearchFor = $(this).val();
  console.log(sSearchFor);

  $("#lblCompanies").children("tr").children("td:nth-of-type(1)").each(function() {
    // console.log( $(this).text() ); // Mark, Jakob
    var sCompareTo = $(this).text();
    if (sSearchFor == sCompareTo) {
      $(this).parent().css("background-color", "yellow");
    } else {
      $(this).parent().css("background-color", "white");
    }
  });
});