Javascript 在jquery中单击“后退”按钮后，删除的内容被替换回去

我有两列，在点击下一步按钮后，我会将所选字段从一列移动到另一列，如果我返回，所有移动的字段都会出现

图像1显示单击下一步按钮前的状态。（工作正常）

单击“下一步”按钮并返回到第一页后，将显示图像2

第1列HTMl

第1列JS代码

self.firmData.forEach（函数（数据）{
$（“#lstBox1”）.append（$（''）.text（data.DisplayName.attr（'value'，data.DisplayName））；
});

第二列HTML

第二列JS代码

self.data.forEach（函数（数据）{
$（“#lstBox2”）.append（$（''）.text（data.columnsepo.attr（'value'，data.columnsepo））；
});

注意

---

self.data

和

self.firmData

值来自api

可能是数据的get响应被兑现了吗？在这种情况下，当您点击后退按钮时，浏览器不会发送新的数据请求，但仍使用旧的。您可以在浏览器的“开发工具”的“网络”部分中对此进行检查

---

根据您拥有的后端类型，您可以在该api调用上停用兑现。您还可以使用头中的

Cache-control:private

阻止缓存客户端站点

您只需使用

localStorage

将所选项目保留在缓存中即可

这里是完整的小提琴链接

这是小提琴的工作演示

---

在左框和右框之间移动项目以检查选定项目是否保留在相同框内后，请刷新页面

我在单击“上一步”时收到新的响应button@chethu：那么，当你点击“下一步”按钮时，你是否正在进行api调用以更新后端中的第一列值？@MuraliNepalli我在点击“下一步”按钮后没有进行任何api调用，实际上，在点击“上一步”按钮后，api正在恢复refreshed@chethu：但当你按“后退”按钮时，此代码是否再次运行？。forEach（函数（数据）{….}）；是的，当我返回按钮时，代码再次执行。您如何更改后端上的数据？我不会更改后端上的任何内容。我只需要使用FrontEnd即可。我真的不理解您的问题。你能描述一下你到底想达到什么目的吗？在第一张图片中，我用右移按钮将字段从第一列移动到第二列，这一切都正常，但如果我转到下一页，又回到上一页，我移动的字段也会出现在第一列中，我想你的问题与你发布的代码无关。我真的需要看看它的其余部分。你给它的东西非常适合我的问题，但即使我刷新页面，它仍然显示相同的内容，如果我刷新页面，它应该像以前一样。你的意思是，你不想将所选项保留在本地存储中？如果是，那么只需在小提琴上注释第82行。如果我这样做，并且如果我转到下一页并再次返回，我移动到第2列的字段也将被删除。我不希望只有在我引用页面时才删除本地存储应该被清除不用担心，谢谢我找到了在页面刷新时清除本地存储的解决方案我还需要一个帮助我有一个下拉菜单如果我更改下拉值第一列值应该被清除怎么做

<div class="menu">
    <select multiple="multiple" id='lstBox1' >
</select>

self.firmData.forEach(function (data) {             
 $("#lstBox1").append($('<option class="items">').text(data.DisplayName).attr('value', data.DisplayName));                        
  });

<div class="menu">
    <select multiple="multiple" id='lstBox2' >
</select>

self.data.forEach(function (data) { 
$("#lstBox2").append($('<option class="items">').text(data.columnsexpo).attr('value', data.columnsexpo));
 });