在jQuery中单击后退按钮后，已删除的内容已替换回

Question

我有两列，在单击下一步按钮后，我将选择的字段从一列移到另一列，如果我回来，则所有已移动的字段都会出现。

图片1 显示了单击下一步之前的状态。（工作正常）

图片2 在单击下一步按钮并返回首页后显示

  

第1列HTMl

locals()

  

第1列JS代码

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

  

第二列HTML

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

  

第二列JS代码

<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)); }); 和self.data值来自api

Answer 1

您可以简单地使用localStorage将所选项目保留在缓存中。

这里是完整的小提琴链接。 https://codesandbox.io/s/ly1l9x7no9

这是小提琴中的有效演示。 https://ly1l9x7no9.codesandbox.io/

刷新页面，在左右框之间移动项目以检查选定的项目后，它们仍保留在同一框中。

Answer 2

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

取决于您使用哪种后端，您可以在该api调用中停用兑现功能。您还可以防止在标题中使用Cache-control: private来缓存客户端站点。