JavaScript：更新本地存储中的数据时如何更新值html表格单元格？答案

【问题标题】：JavaScript: How to to update the value html table cell when data in local storage is updated?JavaScript：更新本地存储中的数据时如何更新值html表格单元格？
【发布时间】：2020-10-07 01:07:55
【问题描述】：

我有一个单独的 javascript 代码，它从 api 获取数据并插入浏览器 localStorage。

API 正在获取 ETA 数据并在 localStorage 中保存为 id_ETA（例如 12342_ETA）键。

当本地存储中的值更新时，我的 html 表 ETA 列值也应该在不刷新页面的情况下更新。

现在我需要刷新整个页面才能在 html 中查看更新的 ETA。

HTML 表格：

<div class="container">     
    <table class="table">
    <thead>
    <tr>
    <th>Id</th>
    <th>Arrival Address</th>
    <th>Departure Address</th>
    <th>ETA</th>
    </tr>
    </thead>
    <tbody>

<script>

var data = getPlanData(); 
<div class="container">     
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>

for(var i=0;i<data.length;i++){
document.write("<tr>");
document.write("<td>"+data[i]['id']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
document.write("<td>"+data[i]['departure']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
if (localStorage.getItem(data[i]['id']+'_ETA'))
{
document.write("<td>"+localStorage.getItem(data[i]['id']+'_ETA')+"</td>");
}
else
{
document.write("<td>-</td>");
}
document.write("</tr>");
</script>
</tbody>
</table>
</div>

getPlanData():

function getPlanData() {
    localData = localStorage.getItem('plan');
    result = csvToJSON(localData);
    return result;
}

注意：ETA 来自单独的 API 当 localStorage 中有新的 ETA 值时，有没有办法在不刷新页面的情况下更新 ETA 列？

【问题讨论】：

请您更新您的示例？它目前充满了错误。确保它是minimal reproducible example。
另外请发布 getPlanData(); -
那么什么是写入本地存储。我以为是getPlanData。请发布所有相关代码

标签： javascript jquery ajax

【解决方案1】：

假设 getPlanData() 写入 localStorage，你需要做两件事

不要使用 document.write，加载后肯定不会，因为它会擦除页面
在 getPlanData() 中保存到 localStorage 并且
使用 getPlanData 函数中的数据调用此更新 - 此脚本可以复制到脚本标签内的文档头部并称为 update(data)

const update = data => { 

  const html = data.map(item => (
`<tr>
  <td>${item.id}</td>
  <td>${item.arrival}</td>
  <td>${item.departure}</td>
  <td>${item.arrival}</td>
  <td>${localStorage.getItem(item.id+"_ETA") || "-"}</td>
</tr>`));
  document.querySelector(".table tbody").innerHTML=html.join("")
}

<div class="container">
  <table class="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Arrival Address</th>
        <th>Departure Address</th>
        <th>ETA</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

如果您发布数据示例，我相信我们可以找到比 localStorage.getItem(item.id+"_ETA") 更好的方法来获取 ETA

更新：你可以做

var data = getPlanData(); 
update(data)

【讨论】：